A powerful and composable button component for your application.
Use the variant prop to change the visual style of the button.
The default button size works great for most cases, but here are some additional size options for unique situations.
Buttons with wire:click or type="submit" will automatically show a loading indicator and disable pointer events during network requests.
You can disable this behavior using :loading="false".
Append or prepend an icon button to another button to add additional functionality.
To display a button as an input, pass as="button" to the input component.
Make the height and width of a button equal. Flux does this automatically for icon-only buttons.
When using ghost or subtle button variants, you can use the inset prop to negate any invisible padding for better alignment.
|
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.
|
| 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 (default), solid, mini, 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.)
|
| 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.
|