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 variant="bordered">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.
<.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.
<.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 Weight 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 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>
Full width
The
full_width
prop change width of button to is a boolean change width of button to
100%
<.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 Mishaka 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.
<.button> <:loading> <.spinner /> </:loading> </.button> <.button variant="outline" color="dawn"> <:loading position="end" color="dawn"> <.spinner /> </:loading> </.button> <.button_link navigate="/" variant="inverted" color="misc"> <:loading position="end"> <.spinner /> </:loading> </.button_link>