Flux components
Toggle
A button that holds an on/off state.
Where a switch is a form control, a toggle is a button that stays pressed — a bold button in an editor, a favorite star, a filter pill.
<flux:toggle label="Bold" icon="bold" />Checked and icons
<div class="flex items-center gap-2">
<flux:toggle icon="bold" label="Bold" checked />
<flux:toggle icon="italic" label="Italic" />
<flux:toggle icon="underline" label="Underline" />
</div>On and off states
Give each state its own label or icon.
<flux:toggle on-icon="heart" off-icon="heart" on-label="Saved" off-label="Save" color="rose" />Sizes
<div class="flex items-center gap-2">
<flux:toggle size="sm" label="Small" icon="star" />
<flux:toggle label="Base" icon="star" />
</div>Reference
flux:toggle
| Prop | Description |
|---|---|
| label | Button text. |
| icon | Icon name. |
| checked | Pressed state. |
| on-label | Label used while on. |
| off-label | Label used while off. |
| on-icon | Icon used while on. |
| off-icon | Icon used while off. |
| variant | Options: outline, ghost, subtle, filled. Default: outline. |
| size | Options: sm, base. Default: base. |
| color | Any Tailwind color for the pressed state. |
| name | Submitted field name. |
| wire:model | Binds to a Livewire property. |