Button

<flux:button>Add to cart</flux:button>

Variants

The default is outline. primary follows your --color-accent token, so it changes with the theme.

<flux:button variant="primary">Pay and place order</flux:button>
<flux:button variant="filled">Add to cart</flux:button>
<flux:button>Default</flux:button>
<flux:button variant="ghost">Ghost</flux:button>
<flux:button variant="subtle">Subtle</flux:button>
<flux:button variant="danger">Delete</flux:button>

Sizes

<flux:button size="xs">Extra small</flux:button>
<flux:button size="sm">Small</flux:button>
<flux:button>Base</flux:button>

Icons

A leading icon, a trailing one, or both. Directional icons should follow the reading direction — see the note below.

<flux:button icon="shopping-cart">Add to cart</flux:button>
<flux:button icon:trailing="arrow-right">Continue to checkout</flux:button>
<flux:button icon="truck" icon:trailing="chevron-down">Track</flux:button>

In RTL, flip directional icons. Flux mirrors layout automatically, but an arrow-right is a picture of an arrow, not a logical direction — it stays pointing right. For a "next" affordance, choose the icon from the locale: arrow-left in Persian, arrow-right in English.

Square

An icon-only button. Always give it an aria-label.

<flux:button icon="heart" square variant="ghost" aria-label="Favorite" />
<flux:button icon="magnifying-glass" square aria-label="Search" />
<flux:button icon="trash" square variant="danger" aria-label="Delete" />

Keyboard shortcut

The kbd prop shows the shortcut inside the button.

<flux:button kbd="⌘S" variant="filled">Save</flux:button>

Loading

Buttons that trigger a Livewire action show a spinner while it runs. Set :loading="false" to opt out.

<flux:button variant="primary" icon="loading">Placing order</flux:button>

Full width

<flux:button variant="primary" class="w-full">Confirm and pay</flux:button>

Group

Join related buttons into one control with flux:button.group.

<flux:button.group>
    <flux:button>List</flux:button>
    <flux:button>Grid</flux:button>
    <flux:button>Table</flux:button>
</flux:button.group>

As a link

Any href renders an anchor with the same styling.

View invoice

<flux:button href="#" icon:trailing="arrow-up-right">View invoice</flux:button>

Reference

flux:button

Prop	Description
variant	Options: `primary`, `filled`, `outline`, `ghost`, `subtle`, `danger`. Default: `outline`.
size	Options: `xs`, `sm`, `base`. Default: `base`.
icon	Leading icon name.
icon:trailing	Trailing icon name.
icon:variant	Icon variant, e.g. `outline`, `solid`, `mini`, `micro`.
square	If `true`, an icon-only square button.
color	Custom Tailwind color for the button surface.
kbd	Keyboard shortcut hint shown inside the button.
loading	If `false`, no spinner while a Livewire action runs. Default: `true`.
type	Options: `button`, `submit`, `reset`. Default: `button`.
align	Content alignment. Default: `center`.
inset	Negative margins so the button does not add height.
href	Renders an anchor instead of a button.

flux:button.group

Joins its child buttons into a single segmented control.