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>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.
<flux:card size="sm" class="flex justify-between"> <flux:heading>Post successfully created.</flux:heading> <flux:button size="sm" icon="x-mark" variant="ghost" inset /></flux:card>