Turn a setting on or off using a compact, button-shaped control.
<flux:toggle wire:model.live="fastMode" icon="bolt" tooltip="Fast mode" />Use the size prop to fit toggles into different interface densities.
<flux:toggle icon="bolt" /><flux:toggle icon="bolt" size="sm" /><flux:toggle icon="bolt" size="xs" />Choose a treatment that matches the surrounding controls.
<flux:toggle icon="bolt" /><flux:toggle icon="bolt" variant="filled" /><flux:toggle icon="bolt" variant="ghost" /><flux:toggle icon="bolt" variant="subtle" />Use the color prop to customize the active state. The inactive state remains neutral.
<flux:toggle icon="bolt" color="blue" checked /><flux:toggle icon="heart" color="red" checked /><flux:toggle icon="bell" color="amber" checked />Add short text when the setting benefits from a persistent visible label.
<flux:toggle icon="bolt">Fast mode</flux:toggle>|
Prop
|
Description
|
|---|---|
| wire:model |
Binds the toggle's checked state to a Livewire property.
|
| icon |
Icon name. The outline icon is shown when off and the solid icon when on.
|
| size |
Control size. Options: base (default), sm, or xs.
|
| variant |
Visual treatment. Options: outline (default), filled, ghost, or subtle.
|
| color |
Color of the active icon. The inactive state and control surface remain neutral. Defaults to the application's accent color.
|
| tooltip |
Tooltip text. Recommended for icon-only toggles because it also supplies the accessible name.
|
| checked |
Sets the initial checked state when not using wire:model.
|
| disabled |
Prevents user interaction with the toggle.
|
|
Attribute
|
Description
|
|---|---|
| data-flux-toggle |
Applied to the root element for styling and identification.
|
| data-checked |
Applied when the toggle is on.
|