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="u-filter-funnel-01" class="icon" /> Filters
</.button>
<.button variant="solid">
Share <.icon name="u-share-07" class="icon" />
</.button>
<.button color="red">
<.icon name="u-trash-01" class="icon" /> Delete
</.button>
<.button>
<.icon name="u-plus" class="icon" />
</.button>
<.button variant="ghost" color="blue">
<.icon name="u-download-02" 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>