Button

New version v0.0.1 🚀

Interactive buttons and button groups for Phoenix and Phoenix LiveView, including form input and link buttons to boost user engagement.

Installation:

mix mishka.ui.gen.component button

Source: View Source

Package: Mishka Chelekom

Tags:

Component Stateless

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.

By using the class prop, you can apply custom classes or Tailwind CSS classes to customize the appearance and behavior of the components, allowing for flexible design changes.

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>Natural</.button>

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

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

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

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

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

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

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

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

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

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

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

<.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">Silver</.button>

<.button font_weight="font-black">Black</.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">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.

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

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

It's best to avoid using this variant with the input_button component, as it only accepts plain text and the button label for its value attribute.

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

It's best to avoid using this variant with the input_button component, as it only accepts plain text and the button label for its value attribute.

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

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

Primary Secondary Info Misc Silver

<.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 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 variation="vertical" color="primary">
  <.button icon="hero-signal" color="info"/>
  <.button icon="hero-share" color="info"/>
  <.button icon="hero-rss" 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

It's best to avoid using gradients outline and gradient inverted, button variants, indicators, and indicator pinging with the input_button component, as it only accepts plain text and the button label for its value attribute.

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

Disabled prop in Phoenix LiveView Button Component

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

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

Button component props

Name	Type	Required	Description
id	string	No	A unique identifier is used to manage state and interaction.
variant	string	No	Determines the style of the button. Supported values: default, outline, transparent, subtle, shadow, bordered, inverted, default_gradient, outline_gradient, inverted_gradient.
type	string	No	Specifies the type of the button. Supported values: button, submit, reset, nil.
color	string	No	Determines the color theme of the button. Supported values: natural, primary, secondary, dark, success, warning, danger, info, Silver, misc, dawn, transparent. The default variant have extra color options: dark and white, which in both light mode and dark mode, these colors are always the same.
rounded	string	No	Determines the border radius. Default: large.
border	string	No	Determines the border style. Default: natural.
size	string	No	Determines the overall size of the button, including padding and font size. Default: large.
content_position	string	No	Determines the alignment of the button's content. Default: center
display	string	No	Specifies the CSS display property for the button. Default: inline-flex.
icon	string	No	Icon displayed alongside the button content.
icon_class	string	No	Custom CSS class for the icon.
font_weight	string	No	Custom class for the font weight. Default: font-normal.
indicator_class	string	No	Custom CSS class for styling the indicator.
indicator_size	string	No	Defines the size of the indicator.
class	string	No	Custom CSS class for additional styling.

Button Group component props

Name	Type	Required	Description
id	string	No	A unique identifier is used to manage state and interaction.
variant	string	No	Determines the style of the button group. Supported values: default, outline, transparent, subtle, shadow, inverted, default_gradient, outline_gradient, inverted_gradient.
variation	string	No	Defines the layout orientation of the button group. Supported values: horizontal, vertical. Default: horizontal.
color	string	No	Determines the color theme of the button group. Supported values: natural, primary, secondary, dark, success, warning, danger, info, Silver, misc, dawn, transparent.
border	string	No	Determines the border style of the button group. Supported values: natural, primary, secondary, dark, success, warning, danger, info, Silver, misc, dawn, transparent.
rounded	string	No	Determines the border radius of the button group. Supported values: extra_small, small, medium, large, extra_large, full, none. Default: small.
size	string	No	Determines the overall size of the button group, including padding and font size. Default: large.
class	string	No	Custom CSS class for additional styling.

Button Link component props

Name	Type	Required	Description
id	string	No	A unique identifier is used to manage state and interaction.
title	string	No	Specifies the title of the element.
navigate	string	No	Defines the path for navigation within the application using a navigate attribute.
patch	string	No	Specifies the path for navigation using a LiveView patch.
href	string	No	Sets the URL for an external link.
variant	string	No	Determines the style of the button link. Supported values: default, outline,bordered, transparent, subtle, shadow, inverted, default_gradient, outline_gradient, inverted_gradient.
color	string	No	Determines the color theme of the button link. Supported values: natural, primary, secondary, dark, success, warning, danger, info, Silver, misc, dawn. Default: natural. The default variant have extra color options: dark and white, which in both light mode and dark mode, these colors are always the same.
rounded	string	No	Determines the border radius. Supported values: extra_small, small, medium, large, extra_large, full, none. Default: large.
size	string	No	Determines the overall size of the button link, including padding and font size. Default: large.
class	string	No	Custom CSS class for additional styling.
display	string	No	Specifies the CSS display property for the button link. Default: inline-flex.
icon	string	No	Icon displayed alongside the content.
icon_class	string	No	Custom CSS class for the icon.
font_weight	string	No	Custom class for the font weight. Default: font-normal.
indicator_class	string	No	Custom CSS class for styling the indicator element.
indicator_size	string	No	Defines the size of the indicator element.

Input Button component props

Name	Type	Required	Description
id	string	No	A unique identifier is used to manage state and interaction.
variant	string	No	Determines the style of the input button. Supported values: default, outline, transparent, bordered, subtle, shadow, inverted, default_gradient, outline_gradient, inverted_gradient.
color	string	No	Determines the color theme of the button link. Supported values: natural, primary, secondary, dark, success, warning, danger, info, Silver, misc, dawn, transparent. The default variant have extra color options: dark and white, which in both light mode and dark mode, these colors are always the same.
rounded	string	No	Determines the border radius. Default: large.
value	string	No	Value of the input button. Default: "".
border	string	No	Determines the border style. Default: natural.
size	string	No	Determines the overall size of the input button. Default: large.
type	string	No	Determines the type of the input button. Default: button.
content_position	string	No	Determines the alignment of the content inside the input button. Default: center.
display	string	No	Specifies the CSS display property for the input button. Default: inline-block.
font_weight	string	No	Custom class for the font weight. Default: font-normal.
class	string	No	Custom CSS class for additional styling.

Button CLI Arguments

Name	Type	Options	Recommended?
`--variant`	string	default - outline - transparent - subtle - shadow - inverted - bordered - default_gradient - outline_gradient - inverted_gradient	Yes
`--color`	string	natural - white - dark - primary - secondary - success - warning - danger - info - silver - misc - dawn - transparent	Yes
`--size`	string	extra_small - small - medium - large - extra_large - full	Yes
`--rounded`	string	extra_small - small - medium - large - extra_large - full - none	Yes
`--type`	string	button_group - button - input_button - button_link	Yes
`--only`	string	button_group - button - input_button - button_link	Yes
`--module`	string	Something	NO