# Toggle

Published: August 10, 2026

Version: ^2.17.0

<img loading="lazy" class="rounded-2xl border dark:border-zinc-700" src="/img/blog/2_17_0_toggle_hero.png" alt="A toggle changing from an inactive outline icon to an active solid blue icon" />

Flux now ships with a **Toggle** component: a compact, button-shaped control for turning settings and modes on or off. It's included in the free component set.

```blade
<flux:toggle wire:model.live="fastMode" icon="bolt" tooltip="Fast mode" />
```

## Tooltips for context

Icon-only controls need a clear name. Add the `tooltip` prop to give people context on hover and provide an accessible name for screen readers:

<img loading="lazy" class="rounded-2xl border dark:border-zinc-700" src="/img/blog/2_17_0_toggle_tooltips.png" alt="An outline bolt toggle showing a Fast mode tooltip" />

```blade
<flux:toggle icon="bolt" tooltip="Fast mode" />
```

## Custom colors

When the toggle is off, it renders the outline version of your icon. Turn it on and the solid version takes its place in your app's accent color. Use the `color` prop to customize that active color without changing the control surface:

<img loading="lazy" class="rounded-2xl border dark:border-zinc-700" src="/img/blog/2_17_0_toggle_colors.png" alt="Five active toggles using blue, red, amber, green, and violet icons" />

```blade
<flux:toggle icon="bolt" color="blue" checked />
<flux:toggle icon="heart" color="red" checked />
<flux:toggle icon="bell" color="amber" checked />
```

## Adding text

Pair an icon with a short visible label when a setting benefits from persistent context. The text stays neutral while the icon carries the active state:

<img loading="lazy" class="rounded-2xl border dark:border-zinc-700" src="/img/blog/2_17_0_toggle_text.png" alt="A Favorite toggle with a heart icon and visible text label" />

```blade
<flux:toggle icon="heart" color="red" label="Favorite"></flux:toggle>
```

## Stateful icons and labels

Some toggles need to communicate more than a simple on or off value. Give each state a distinct icon and label so users can tell at a glance which one is active:

<img loading="lazy" class="rounded-2xl border dark:border-zinc-700" src="/img/blog/2_17_0_toggle_stateful.png" alt="Sound toggle shown off with a muted speaker icon and on with a speaker wave icon" />

```blade
<flux:toggle
    on:icon="speaker-wave"
    off:icon="speaker-x-mark"
    on:label="Sound on"
    off:label="Sound off"
/>
```

---

[Check out the toggle docs →](https://fluxui.dev/components/toggle)