A powerful and composable button component for your application.
<flux:button>Button</flux:button>Use the variant prop to change the visual style of the button.
<flux:button>Default</flux:button><flux:button variant="primary">Primary</flux:button><flux:button variant="filled">Filled</flux:button><flux:button variant="danger">Danger</flux:button><flux:button variant="ghost">Ghost</flux:button><flux:button variant="subtle">Subtle</flux:button>Use standard Tailwind color names with the color prop. Color works independently with primary, filled, outline, ghost, and subtle buttons.
<flux:button variant="primary" color="blue">Primary</flux:button><flux:button variant="filled" color="blue">Filled</flux:button><flux:button variant="outline" color="blue">Outline</flux:button><flux:button variant="ghost" color="blue">Ghost</flux:button><flux:button variant="subtle" color="blue">Subtle</flux:button>Colored outline buttons keep the default surface and shadow while softly mixing the selected color into the label, border, and hover state.
<flux:button variant="outline" color="blue">Blue</flux:button><flux:button variant="outline" color="green">Green</flux:button><flux:button variant="outline" color="red">Red</flux:button>The default button size works great for most cases, but here are some additional size options for unique situations.
<flux:button>Base</flux:button><flux:button size="sm">Small</flux:button><flux:button size="xs">Extra small</flux:button>Automatically sized and styled icons for your buttons.
<flux:button icon="ellipsis-horizontal" /><flux:button icon="arrow-down-tray">Export</flux:button><flux:button icon:trailing="chevron-down">Open</flux:button><flux:button icon="x-mark" variant="subtle" />Buttons with wire:click or type="submit" will automatically show a loading indicator and disable pointer events during network requests.
<flux:button wire:click="save"> Save changes</flux:button>You can disable this behavior using :loading="false".
<flux:button wire:click="save" :loading="false">A button that spans the full width of the container.
<flux:button variant="primary" class="w-full">Send invite</flux:button>Fuse related buttons into a group with shared borders.
<flux:button.group> <flux:button>Oldest</flux:button> <flux:button>Newest</flux:button> <flux:button>Top</flux:button></flux:button.group>Fuse multiple icon buttons into a visually-linked group.
<flux:button.group> <flux:button icon="bars-3-bottom-left"></flux:button> <flux:button icon="bars-3"></flux:button> <flux:button icon="bars-3-bottom-right"></flux:button></flux:button.group>Append or prepend an icon button to another button to add additional functionality.
<flux:button.group> <flux:button>New product</flux:button> <flux:button icon="chevron-down"></flux:button></flux:button.group>Display an HTML a tag as a button by passing the href prop.
<flux:button href="https://google.com" icon:trailing="arrow-up-right"> Visit Google</flux:button>To display a button as an input, pass as="button" to the input component.
<flux:input as="button" placeholder="Search..." icon="magnifying-glass" kbd="⌘K" />Make the height and width of a button equal. Flux does this automatically for icon-only buttons.
<flux:button square>...</flux:button>When using ghost or subtle button variants, you can use the inset prop to negate any invisible padding for better alignment.
<div class="flex justify-between"> <flux:heading>Post successfully created.</flux:heading> <flux:button size="sm" icon="x-mark" variant="ghost" inset /></div>|
Prop
|
Description
|
|---|---|
| as |
The HTML tag to render the button as. Options: button (default), a, div.
|
| href |
The URL to link to when the button is used as an anchor tag.
|
| type |
The HTML type attribute of the button. Options: button (default), submit.
|
| variant |
Visual style of the button. Options: outline, primary, filled, danger, ghost, subtle. Default: outline.
|
| color |
Color of the button. Accepts standard Tailwind color names. Chromatic colors work with primary, filled, outline, ghost, and subtle; neutral colors use the default styling outside of primary.
|
| size |
Size of the button. Options: base (default), sm, xs.
|
| icon |
Name of the icon to display at the start of the button.
|
| icon:variant |
Visual style of the icon. Options: outline, solid, mini, micro. Default: micro.
|
| icon:trailing |
Name of the icon to display at the end of the button.
|
| square |
If true, makes the button square. (Useful for icon-only buttons.)
|
| align |
Alignment of the button content. Options: start, center, end. Default: center.
|
| inset |
Add negative margins to specific sides. Options: top, bottom, left, right, or any combination of the four.
|
| loading |
If true, shows a loading spinner and disables the button when used with wire:click or type="submit". If false, the button will not show a loading spinner at all. Default: true.
|
| tooltip |
Text to display in a tooltip when hovering over the button.
|
| tooltip:position |
Position of the tooltip. Options: top, bottom, left, right. Default: top.
|
| tooltip:kbd |
Text to display in a keyboard shortcut tooltip when hovering over the button.
|
| kbd |
Text to display in a keyboard shortcut tooltip when hovering over the button.
|
|
CSS
|
Description
|
|---|---|
| class |
Additional CSS classes applied to the button. Common use: w-full for full width.
|
|
Attribute
|
Description
|
|---|---|
| data-flux-button |
Applied to the root element for styling and identification.
|
A container component that groups multiple buttons together with shared borders.
|
Slot
|
Description
|
|---|---|
| default |
The buttons to be grouped together.
|
