Toggle

A button that is on or off, with aria-pressed.

Basic

pressed is two-way; onPressedChange fires for the user's presses. The star fills while pressed.

pressed: false, changes: 0

Code

<Toggle pressed={state.bookmark} label="Bookmark" class="bookmark"><Icon name="star" /></Toggle>

/* the icon fills while pressed */
.bookmark[data-state="on"] .icon { fill: currentColor; }

Usage

import { Toggle } from "@elements/ui/toggle";

<Toggle pressed={editor.bold} label="Bold"><Icon name="bold" /></Toggle>
<Toggle variant="outline" pressed={filters.starred}><Icon name="star" /> Starred</Toggle>

Examples

Outline

A bordered toggle.

Code

<Toggle variant="outline" pressed={state.italic} label="Italic"><Icon name="italic" /></Toggle>
<Toggle variant="outline" pressed={state.bold} label="Bold"><Icon name="bold" /></Toggle>

With text

An icon and a label.

Code

<Toggle pressed={state.italic}><Icon name="italic" /> Italic</Toggle>

Sizes

Heights come from the control tokens.

Code

<Toggle size="sm" variant="outline">Small</Toggle>
<Toggle variant="outline">Default</Toggle>
<Toggle size="lg" variant="outline">Large</Toggle>

Disabled

Not pressable; a disabled toggle still shows its state.

Code

<Toggle disabled label="Underline"><Icon name="underline" /></Toggle>
<Toggle disabled pressed label="Bold"><Icon name="bold" /></Toggle>

Cancel a change

onPressedChange runs before the toggle changes and gets details second; details.cancel() keeps it as it was.

pressed: false, attempts: 0, last: none

Code

<Toggle pressed={guard.value} onPressedChange={(pressed, details) => {
  if (!guard.allowed) details.cancel();
}}>Notify me</Toggle>

Right to left

The icon leads at the inline start.

Reference Toggle in the manual Every part, attribute, slot, key and data attribute.