Button

Updated Oct 17, 2026 v0.0.10

v0.0.10StableComponentStatelessApache-2.0

Installation mix mishka.ui.gen.component button

Source View Source

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.

Overview of the Phoenix and LiveView Button Component

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 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.

Base color & variant

heex

<.button>Base</.button>

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.

Default variant of Phoenix and LiveView button component

heex

<.button variant="default" color="natural">Natural</.button>

<.button variant="default" color="white">White</.button>

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

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

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

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

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

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

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

<.button variant="default" color="silver">Silver</.button>

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

<.button variant="default" 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.

Outline variant of button component

heex

<.button variant="outline" color="natural">Natural</.button>

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

<.button variant="outline" color="secondary">Secondary</.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="silver">Silver</.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.

Transparent variant of button component

heex

<.button variant="transparent" color="natural">Natural</.button>

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

<.button variant="transparent" color="secondary">Secondary</.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="silver">Silver</.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.

Subtle variant of button component

heex

<.button variant="subtle" color="natural">Natural</.button>

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

<.button variant="subtle" color="secondary">Secondary</.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="silver">Silver</.button>

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

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

Bordered variant of button component

With the variant="bordered" prop, the button is like outline but with different backgrounds in light and dark mode and a border available in various colors.

Bordered variant of button component

heex

<.button variant="bordered" color="natural">Natural</.button>

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

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

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

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

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

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

<.button variant="bordered" color="silver">Silver</.button>

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

<.button variant="bordered" 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.

Shadow variant of button component

heex

<.button variant="shadow" color="natural">Natural</.button>

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

<.button variant="shadow" color="secondary">Secondary</.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="silver">Silver</.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.

Inverted variant of button component

heex

<.button variant="inverted" color="natural">Natural</.button>

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

<.button variant="inverted" color="secondary">Secondary</.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="silver">Silver</.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. On hover, the direction of the gradient changes.

Default Gradient variant of button component

heex

<.button variant="default_gradient" color="natural">Natural</.button>

<.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>

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

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

<.button variant="default_gradient" color="silver">Silver</.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.

Outline Gradient variant of button component

heex

<.button variant="outline_gradient" color="natural">Natural</.button>

<.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>

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

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

<.button variant="outline_gradient" color="silver">Silver</.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.

Inverted Gradient variant of button component

heex

<.button variant="inverted_gradient" color="natural">Natural</.button>

<.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>

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

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

<.button variant="inverted_gradient" color="silver">Silver</.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.

Radius prop

heex

<.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.

Size prop

heex

<.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.

Display of buttons

heex

<.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.

Icon prop

heex

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

<.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 by adding a position attribute. 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.

Indicator prop in Phoenix LiveView Button Component

heex

<.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.

Pinging prop in Phoenix LiveView Button Component

heex

<.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.

Circle Prop

heex

<.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.

Link in Phoenix LiveView Button Component

Primary Secondary Info Misc Silver

heex

<.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 base, natural, primary, secondary, success, warning, danger, info, silver, 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

heex

<.button_group variation="vertical" color="primary">
  <.button icon="hero-signal" color="info" aria-label="Signal"/>
  <.button icon="hero-share" color="info" aria-label="Share"/>
  <.button icon="hero-rss" color="info" aria-label="RSS feed"/>
</.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 in Phoenix LiveView Button Component

heex

<.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="silver" />

Disabled prop in Phoenix LiveView Button Component

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

Disabled prop in Phoenix LiveView Button Component

heex

<.button disabled>default</.button>

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

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

<.button disabled variant="inverted_gradient">gradient</.button>

<.button disabled variant="outline_gradient">gradient</.button>

<.button disabled variant="default_gradient">gradient</.button>

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

<.button disabled variant="transparent">Transparent</.button>

<.button disabled variant="subtle">Subtle</.button>

Font Weight prop in Phoenix LiveView Button Component

The font_weight 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.

Font Weight prop in Phoenix LiveView Button Component

heex

<.button font_weight="font-bold">Bold</.button>

<.button font_weight="font-semibold">Semibold</.button>

<.button font_weight="font-medium">Medium</.button>

<.button font_weight="font-thin">Thin</.button>

<.button font_weight="font-black">Black</.button>

Line Height of buttons

The line_height prop in the Mishka Chelekom button component allows you to change the line height using any Tailwind line height class.

Line Height of buttons

heex

<.button line_height="leading-6">Leading 6</.button>
<.button line_height="leading-7">Leading 7</.button>
<.button line_height="leading-8">Leading 8</.button>

Full width

The full_width prop change width of button to is a boolean change width of button to 100%

Full width

heex

<.button size="extra_small" full_width>Natural</.button>

Loading slot

The loading slot requires a position attribute, which must be set to either start or end. This allows developers to add custom content or components to represent the loading process. For example, users can utilize the spinner component from Mishka Chelekom in any color and size they desire, ensuring a seamless and customizable user experience. If user not specify position the start is the default position of loader.

Loading slot

Chelekom

heex

<.button>
  <:loading>
    <.spinner />
  </:loading>
</.button>

<.button variant="outline" color="dawn">
  <:loading position="end">
    <.spinner />
  </:loading>
</.button>

<.button_link navigate="/" variant="inverted" color="misc">
  <:loading position="end">
    <.spinner />
  </:loading>
</.button_link>

Attributes

Name	Type	Default	Values	Required	Description
`id`	`string`	—	—	No	A unique identifier is used to manage state and interaction
`variant`	`string`	`base`	`basedefaultoutlinetransparentsubtleshadowinvertedbordereddefault_gradientoutline_gradientinverted_gradient`	No	Determines the style
`type`	`any`	—	`buttonsubmitreset`	No	Specifies the type of the element
`color`	`string`	`base`	`basenaturalwhitedarkprimarysecondarysuccesswarningdangerinfosilvermiscdawntransparent`	No	Determines color theme
`rounded`	`string`	`large`	`extra_smallsmallmediumlargeextra_largefullnone`	No	Determines the border radius
`border`	`string`	`extra_small`	—	No	Determines border style
`size`	`string`	`large`	`extra_smallsmallmediumlargeextra_largefull`	No	Determines the overall size of the elements, including padding, font size, and other items
`content_position`	`string`	`center`	—	No	Determines the alignment of the element's content
`display`	`string`	`inline-flex`	—	No	Specifies the CSS display property for the element
`line_height`	`string`	`leading-5`	—	No	Line height
`icon`	`string`	—	—	No	Icon displayed alongside of an item
`icon_class`	`string`	—	—	No	Determines custom class for the icon
`font_weight`	`string`	`font-normal`	—	No	Determines custom class for the font weight
`full_width`	`boolean`	`false`	—	No	Make button full width
`indicator_class`	`string`	—	—	No	Custom CSS class for styling the indicator element
`indicator_size`	`string`	`extra_small`	—	No	Defines the size of the indicator element
`class`	`any`	—	—	No	Custom CSS class for additional styling
`content_class`	`string`	`block`	—	No	Custom CSS class for additional styling
`rest`	`global`	—	—	No	Global attributes can define defaults which are merged with attributes provided by the caller

Slots

Name	Required	Description
`inner_block`	No	Inner block that renders HEEx content
`loading`	No	—

Attributes of the loading slot

Name	Type	Default	Values	Required	Description
`class`	`any`	—	—	No	Custom CSS class for additional styling
`position`	`string`	—	`startend`	No	Determines the element position

Options

Each option takes one or more of its values, separated by commas.

Option	Values
`--variant`	`basedefaultoutlinetransparentsubtleshadowinvertedbordereddefault_gradientoutline_gradientinverted_gradient`
`--color`	`basenaturalwhitedarkprimarysecondarysuccesswarningdangerinfosilvermiscdawntransparent`
`--size`	`extra_smallsmallmediumlargeextra_largefull`
`--rounded`	`extra_smallsmallmediumlargeextra_largefullnone`
`--type`	`button_groupbuttoninput_buttonbutton_linkback`
`--module`	A module name of your own

What it generates

Functions button_groupbuttoninput_buttonbutton_linkback

Helpers None

Generated with it icon

Command mix mishka.ui.gen.component button