Overview of the Phoenix and LiveView Button Component

The Mishka Chelekom Button module offers a flexible set of button components for Phoenix applications, allowing easy customization for different sizes, colors, and styles. It includes buttons with icons, gradients, and indicators, making it adaptable for various design needs. This Phoenix button module ensures smooth and efficient button integration, enhancing the visual appeal and usability of your app.

With components like standard buttons, button groups, input buttons, and button links, it ensures your application maintains a consistent and polished look while being user-friendly and responsive. The The Mishka Chelekom Button module, a Phoenix LiveView component, is a great solution for developers looking to build intuitive and visually appealing interfaces, making it an ideal choice for enhancing user experience in Phoenix LiveView projects.

Default variant of Phoenix and LiveView button component

The default variant of the Mishka Chelekom button automatically applies a solid background and border that change on hover, ideal for primary actions. With just a single prop, you can choose from a variety of colors, making it easy to adapt to different design needs while offering a flexible, visually appealing solution for any interface.

<.button>White</.button>

<.button color="primary">Primary</.button>

<.button color="secondary">Secondary</.button>

<.button color="dark">Dark</.button>

<.button color="success">Success</.button>

<.button color="warning">Warning</.button>

<.button color="danger">Danger</.button>

<.button color="info">Info</.button>

<.button color="light">Light</.button>

<.button color="misc">Misc</.button>

<.button color="dawn">Dawn</.button>

Outline variant of button component

With the variant="outline" prop, the button has a transparent background and a border available in various colors.

<.button variant="outline">White</.button>

<.button variant="outline" color="primary">Primary</.button>

<.button variant="outline" color="secondary">Secondary</.button>

<.button variant="outline" color="dark">Dark</.button>

<.button variant="outline" color="success">Success</.button>

<.button variant="outline" color="warning">Warning</.button>

<.button variant="outline" color="danger">Danger</.button>

<.button variant="outline" color="info">Info</.button>

<.button variant="outline" color="light">Light</.button>

<.button variant="outline" color="misc">Misc</.button>

<.button variant="outline" color="dawn">Dawn</.button>

Transparent variant of button component

With the variant="transparent" prop, the button has a transparent background and border, providing a minimal look. On hover, only the text color changes, making it perfect for subtle actions in a modern and minimalist interface.

<.button variant="transparent">White</.button>

<.button variant="transparent" color="primary">Primary</.button>

<.button variant="transparent" color="secondary">Secondary</.button>

<.button variant="transparent" color="dark">Dark</.button>

<.button variant="transparent" color="success">Success</.button>

<.button variant="transparent" color="warning">Warning</.button>

<.button variant="transparent" color="danger">Danger</.button>

<.button variant="transparent" color="info">Info</.button>

<.button variant="transparent" color="light">Light</.button>

<.button variant="transparent" color="misc">Misc</.button>

<.button variant="transparent" color="dawn">Dawn</.button>

Subtle variant of button component

With the variant="subtle" prop, the button has a transparent background and border, creating a minimal and clean look. On hover, the background and text colors change.

<.button variant="subtle">White</.button>

<.button variant="subtle" color="primary">Primary</.button>

<.button variant="subtle" color="secondary">Secondary</.button>

<.button variant="subtle" color="dark">Dark</.button>

<.button variant="subtle" color="success">Success</.button>

<.button variant="subtle" color="warning">Warning</.button>

<.button variant="subtle" color="danger">Danger</.button>

<.button variant="subtle" color="info">Info</.button>

<.button variant="subtle" color="light">Light</.button>

<.button variant="subtle" color="misc">Misc</.button>

<.button variant="subtle" color="dawn">Dawn</.button>

Shadow variant of button component

With the variant="shadow" prop, the button resembles the default style but includes a shadow effect, adding depth while keeping a clean, transparent background and border. On hover, the background and text colors change, making it perfect for adding subtle emphasis to your design.

<.button variant="shadow">White</.button>

<.button variant="shadow" color="primary">Primary</.button>

<.button variant="shadow" color="secondary">Secondary</.button>

<.button variant="shadow" color="dark">Dark</.button>

<.button variant="shadow" color="success">Success</.button>

<.button variant="shadow" color="warning">Warning</.button>

<.button variant="shadow" color="danger">Danger</.button>

<.button variant="shadow" color="info">Info</.button>

<.button variant="shadow" color="light">Light</.button>

<.button variant="shadow" color="misc">Misc</.button>

<.button variant="shadow" color="dawn">Dawn</.button>

Inverted variant of button component

With the variant="inverted" prop, the button is like the outline variant, featuring a border without a background. On hover, it adds a background color.

<.button variant="inverted">White</.button>

<.button variant="inverted" color="primary">Primary</.button>

<.button variant="inverted" color="secondary">Secondary</.button>

<.button variant="inverted" color="dark">Dark</.button>

<.button variant="inverted" color="success">Success</.button>

<.button variant="inverted" color="warning">Warning</.button>

<.button variant="inverted" color="danger">Danger</.button>

<.button variant="inverted" color="info">Info</.button>

<.button variant="inverted" color="light">Light</.button>

<.button variant="inverted" color="misc">Misc</.button>

<.button variant="inverted" color="dawn">Dawn</.button>

Default Gradient variant of button component

With the variant="default_gradient" prop, the button features a gradient background that transitions from purple to blue. On hover, the direction of the gradient changes.

<.button variant="default_gradient" color="primary">Primary</.button>

<.button variant="default_gradient" color="secondary">Secondary</.button>

<.button variant="default_gradient" color="success">Success</.button>

<.button variant="default_gradient" color="warning">Warning</.button>

<.button variant="default_gradient" color="danger">Danger</.button>

<.button variant="default_gradient" color="info">Info</.button>

Outline Gradient variant of button component

With the variant="outline_gradient" prop, the button features a gradient background that transitions from purple to blue. On hover, the direction of the gradient changes.

<.button variant="outline_gradient" color="primary">Primary</.button>

<.button variant="outline_gradient" color="secondary">Secondary</.button>

<.button variant="outline_gradient" color="success">Success</.button>

<.button variant="outline_gradient" color="warning">Warning</.button>

<.button variant="outline_gradient" color="danger">Danger</.button>

<.button variant="outline_gradient" color="info">Info</.button>

Inverted Gradient variant of button component

With the variant="inverted_gradient" prop, the button features a gradient background that transitions from purple to blue. On hover, the direction of the gradient changes.

<.button variant="inverted_gradient" color="primary">Primary</.button>

<.button variant="inverted_gradient" color="secondary">Secondary</.button>

<.button variant="inverted_gradient" color="success">Success</.button>

<.button variant="inverted_gradient" color="warning">Warning</.button>

<.button variant="inverted_gradient" color="danger">Danger</.button>

<.button variant="inverted_gradient" color="info">Info</.button>

Radius prop

With the Mishka Chelekom button component, you can customize the button's border radius using different size options. Available sizes include extra_small , small , medium , large , extra_large , full , and none , allowing you to adjust the roundness of the button’s corners to fit your design needs. Whether you prefer sharp edges or fully rounded buttons, these options offer flexibility for any interface.

<.button rounded="extra_small">Extra Small</.button>

<.button rounded="small">Small</.button>

<.button rounded="medium">Medium</.button>

<.button rounded="large">Large</.button>

<.button rounded="extra_large">Extra Large</.button>

Size prop

The size prop in the Mishka Chelekom button controls padding and text size. When circle is false, it uses padding based on the size ( extra_small to extra_large ). If circle is true, it applies Tailwind size classes for circular buttons. It also adjusts the indicator and text size accordingly.

<.button size="extra_small">Extra Small</.button>

<.button size="small">Small</.button>

<.button size="medium">Medium</.button>

<.button size="large">Large</.button>

<.button size="extra_large">Extra Large</.button>

Display of buttons

The display prop in the Mishka Chelekom button component controls the CSS display property. It supports values like flex , inline-flex , block , and inline-block , with a default of inline-flex , allowing for flexible positioning and layout options.

<.button display="flex">Flex</.button>

<.button display="inline-flex">Inline Flex</.button>

<.button display="block">Block</.button>

<.button display="inline-block">Inline Block</.button>

<.button display="flex">Flex</.button>

Icon prop

The icon prop allows you to display an icon alongside an item, using LiveView Hero Icons by default. The icon_class prop enables custom classes for styling the icon. By default, the icon is positioned on the left, but the right_icon and left_icon props allow you to control the icon’s position inside the button.

<.button icon="hero-bookmark" icon_class="size-4" />

<.button icon="hero-plus">Button</.button>

<.button icon="hero-bell">Button</.button>

<.button icon="hero-magnifying-glass-circle-solid">Button</.button>

<.button icon="hero-play">Button</.button>

Indicator prop in Phoenix LiveView Button Component

The indicator prop in the Mishka Chelekom button component allows you to display an indicator, typically a small circle, inside the button. The indicator can be positioned in various places using the indicator_position prop. By default, it is positioned at the left ( left_indicator ), but you can choose other positions such as right_indicator , top_left_indicator , or bottom_center_indicator . Additionally, the size of the indicator can be adjusted using the indicator_size prop, with options ranging from extra_small to extra_large , allowing for flexible customization of the indicator's appearance and position.

<.button left_indicator indicator_size="extra_small">
  Extra Small Indicator - Left
</.button>

<.button right_indicator indicator_size="small">
  Small Indicator - Right
</.button>

<.button top_left_indicator indicator_size="medium">
  Medium Indicator - Top Left
</.button>

<.button top_center_indicator indicator_size="large">
  Large Indicator - Top Center
</.button>

<.button top_right_indicator indicator_size="extra_large">
  Extra Large Indicator - Top Right
</.button>

<.button middle_left_indicator indicator_size="medium">
  Medium Indicator - Middle Left
</.button>

<.button middle_right_indicator indicator_size="medium">
  Medium Indicator - Middle Right
</.button>

<.button bottom_left_indicator indicator_size="medium">
  Medium Indicator - Bottom Left
</.button>

<.button bottom_center_indicator indicator_size="medium">
  Medium Indicator - Bottom Center
</.button>

<.button bottom_right_indicator indicator_size="medium">
  Medium Indicator - Bottom Right
</.button>

Pinging prop in Phoenix LiveView Button Component

In the Mishka Chelekom button component, you can add a "pinging" animation to the indicator by using the pinging prop. When the pinging prop is set to true, the indicator will have a subtle pulsing animation, drawing attention to the element. By default, this prop is set to false, meaning the indicator does not animate unless explicitly specified. This feature adds a dynamic touch to the button's indicator, making it useful for alerting users to important actions or statuses.

<.button left_indicator pinging>
  Extra Small Indicator - Left (Pinging)
</.button>

<.button right_indicator pinging>
  Small Indicator - Right (Pinging)
</.button>

<.button top_left_indicator pinging>
  Medium Indicator - Top Left (Pinging)
</.button>

<.button top_center_indicator pinging>
  Large Indicator - Top Center (Pinging)
</.button>

<.button top_right_indicator pinging>
  Extra Large Indicator - Top Right (Pinging)
</.button>

Circle Prop

The circle prop ensures the button has equal width and height, which can be used to create either circular shapes or square buttons. This prop is perfect for situations where you want a consistent, symmetrical design, making it ideal for icon buttons or other elements that require uniform dimensions.

<.button circle size="extra_small">Extra Small Button</.button>

<.button circle size="small">Small Button</.button>

<.button circle size="medium">Medium Button</.button>

<.button circle size="large">Large Button</.button>

<.button circle size="extra_large">Extra Large Button</.button>

<.button circle rounded="full" size="extra_large">
  Extra Large Button
</.button>

Link in Phoenix LiveView Button Component

The button_link component is similar to a button but adds support for navigation with navigate , patch , and href . It also supports common HTML a tag attributes like target and download , making it ideal for both internal routing and external links.

<.button circle size="extra_small">Extra Small Button</.button>

<.button circle size="small">Small Button</.button>

<.button circle size="medium">Medium Button</.button>

<.button circle size="large">Large Button</.button>

<.button circle size="extra_large">Extra Large Button</.button>

<.button circle rounded="full" size="extra_large">
  Extra Large Button
</.button>

Button Group

The button_group component is a wrapper for organizing buttons. By default, it displays buttons horizontally, but you can switch to vertical using the variation prop. You can use the border prop to add a border with color options like white , primary , secondary , dark , success , warning , danger , info , light , misc , dawn , and transparent . The rounded prop adjusts the border radius from extra_small to extra_large . Additionally, both button and button_link components can be used inside the group.

<.button_group variation="vertical" color="primary">
  <.button icon="hero-signal" variant="unbordered" color="info"/>
  <.button icon="hero-share" variant="unbordered" color="info"/>
  <.button icon="hero-rss" variant="unbordered" color="info"/>
</.button_group>

<.button_group color="misc">
  <.button variant="inverted" color="misc">
    Button
  </.button>

  <.button variant="inverted" color="misc">
    Button
  </.button>

  <.button variant="inverted" color="misc">
    Button
  </.button>

  <.button variant="inverted" color="misc">
    Button
  </.button>
</.button_group>

Input Button in Phoenix LiveView Button Component

The input_button component is an input element styled as a button that supports different input types, including button , submit , and reset . It comes with all the available variants, colors, and styling options like border, size, and rounded corners, allowing you to fully customize its appearance. This makes it ideal for forms and interactive elements where the input behaves like a button but retains the flexibility of an input field.

<.input_button type="submit" size="extra_small" value="Primary" />

<.input_button type="submit" size="small" value="Secondary" />

<.input_button type="button" size="medium" value="Info" />

<.input_button type="button" size="large" value="Misc" />

<.input_button type="reset" size="extra_large" value="Light" />

Disabled prop in Phoenix LiveView Button Component

The disabled prop can be applied to a button to prevent user interaction.

<.button disabled>White</.button>

<.button disabled color="primary">Primary</.button>

<.button disabled color="secondary">Secondary</.button>

<.button disabled color="dark">Dark</.button>

<.button disabled color="success">Success</.button>

<.button disabled color="warning">Warning</.button>

<.button disabled color="danger">Danger</.button>

<.button disabled color="info">Info</.button>

<.button disabled color="light">Light</.button>

<.button disabled color="misc">Misc</.button>

<.button disabled color="dawn">Dawn</.button>

Font Wight prop in Phoenix LiveView Button Component

The font_wight prop sets text thickness using Tailwind classes like font-thin or font-black , allowing you to adjust text weight for better emphasis and design flexibility.

<.button disabled>White</.button>

<.button disabled color="primary">Primary</.button>

<.button disabled color="secondary">Secondary</.button>

<.button disabled color="dark">Dark</.button>

<.button disabled color="success">Success</.button>

<.button disabled color="warning">Warning</.button>

<.button disabled color="danger">Danger</.button>

<.button disabled color="info">Info</.button>

<.button disabled color="light">Light</.button>

<.button disabled color="misc">Misc</.button>

<.button disabled color="dawn">Dawn</.button>