Docs

Button

Interactive elements for actions and navigation.

<.button>Button</.button>

Variants

Use different button styles to indicate importance and function of actions.

<.button>Default</.button>
<.button variant="solid">Solid</.button>
<.button variant="ghost">Ghost</.button>

Sizes

Choose button sizes to accommodate various content lengths and layouts.

<.button size="xs">Hello</.button>
<.button size="sm">Hello</.button>
<.button size="md">Hello</.button>
<.button size="lg">Hello</.button>
<.button size="xl">Hello</.button>

Disabled

Show buttons in a disabled state to indicate unavailable functionality.

<.button disabled>Disabled</.button>
<.button disabled variant="solid">Disabled</.button>
<.button class="w-24" variant="solid" disabled>
  <.loading class="icon text-white" />
</.button>
<.button disabled variant="ghost">Disabled</.button>

Icons

Add icons to buttons for visual cues and enhanced clarity of action.

<.button>
  <.icon name="hero-funnel" class="icon" /> Filters
</.button>

<.button variant="solid">
  Share <.icon name="hero-share" class="icon" />
</.button>

<.button color="red">
  <.icon name="hero-trash" class="icon" /> Delete
</.button>

<.button>
  <.icon name="hero-plus" class="icon" />
</.button>

<.button variant="ghost" color="blue">
  <.icon name="hero-arrow-down-tray" class="icon" />
</.button>

Customization

Apply custom styles to buttons while maintaining core functionality.

<.button class="rounded-full">Pill button</.button>

Colors

Customize button colors using a subset of supported Tailwind CSS colors.

Default Solid Ghost 
<.button color="default">Default</.button>
<.button color="red">Red</.button>
<.button color="yellow">Yellow</.button>
<.button color="green">Green</.button>
<.button color="blue">Blue</.button>

<.button variant="solid" color="default">Default</.button>
<.button variant="solid" color="red">Red</.button>
<.button variant="ghost" color="default">Default</.button>
<.button variant="solid" color="yellow">Yellow</.button>
<.button variant="solid" color="green">Green</.button>
<.button variant="solid" color="blue">Blue</.button>

<.button variant="ghost" color="red">Red</.button>
<.button variant="ghost" color="yellow">Yellow</.button>
<.button variant="ghost" color="green">Green</.button>
<.button variant="ghost" color="blue">Blue</.button>