Components

Toggle

A two-state button that can be either on or off.

Playground

Variant—variant

Size—size

Label—label

Icon—icon

Pressed—pressed

Disabled—disabled

Usage

Import Toggle from the design system. Clicking it switches between on and off — the pressed state fills with the muted color, and the root exposes aria-pressed and data-state for assistive technology and styling.

import { Toggle } from "@workspace/ui/components/toggle"

<Toggle>Toggle</Toggle>

Bookmark

The root exposes a group/toggle class, so children can restyle themselves per state. Phosphor icons switch to a solid look via weight="fill" rather than CSS, so render both weights and swap them with group-data-[state=on]/toggle:hidden.

<Toggle aria-label="Toggle bookmark" size="sm" variant="outline">
  <BookmarkSimpleIcon
    data-icon="inline-start"
    className="group-data-[state=on]/toggle:hidden"
  />
  <BookmarkSimpleIcon
    data-icon="inline-start"
    weight="fill"
    className="hidden group-data-[state=on]/toggle:block"
  />
  Bookmark
</Toggle>

Outline

The outline variant adds an input-colored border and a subtle shadow — use it when the toggle sits on its own rather than in a toolbar.

<Toggle variant="outline" aria-label="Toggle italic">
  <TextItalicIcon data-icon="inline-start" />
  Italic
</Toggle>
<Toggle variant="outline" aria-label="Toggle bold">
  <TextBIcon data-icon="inline-start" />
  Bold
</Toggle>

With Text

Combine an icon and a text label. Add data-icon="inline-start" or data-icon="inline-end" to the icon for the correct spacing, as with Button.

<Toggle aria-label="Toggle italic">
  <TextItalicIcon data-icon="inline-start" />
  Italic
</Toggle>

Sizes

Three sizes — sm (32px), default (36px) and lg (40px). The min-width matches the height, so icon-only toggles stay square.

<Toggle variant="outline" size="sm" aria-label="Toggle small">
  Small
</Toggle>
<Toggle variant="outline" size="default" aria-label="Toggle default">
  Default
</Toggle>
<Toggle variant="outline" size="lg" aria-label="Toggle large">
  Large
</Toggle>

Disabled

A disabled toggle dims to 50% opacity and blocks pointer events. The pressed state is preserved, so a disabled toggle can stay on.

<Toggle aria-label="Toggle disabled" disabled>
  Disabled
</Toggle>
<Toggle variant="outline" aria-label="Toggle disabled outline" disabled>
  Disabled
</Toggle>

Toggle groups

For a set of related toggles — a text-formatting toolbar, a single-choice filter — use the ToggleGroup component instead of standalone Toggles: it handles single or multiple selection, roving focus, and joins the items visually. See the Toggle Group page for the full API.

<ToggleGroup type="multiple" variant="outline">
  <ToggleGroupItem value="bold" aria-label="Bold">
    <TextBIcon />
  </ToggleGroupItem>
  <ToggleGroupItem value="italic" aria-label="Italic">
    <TextItalicIcon />
  </ToggleGroupItem>
  <ToggleGroupItem value="underline" aria-label="Underline">
    <TextUnderlineIcon />
  </ToggleGroupItem>
</ToggleGroup>

RTL

Toggles need no extra classes in right-to-left layouts — the icon paddings use logical properties, so the spacing follows the direction of the document.

<div dir="rtl">
  <Toggle variant="outline" aria-label="مفضلة">
    <StarIcon data-icon="inline-start" />
    مفضلة
  </Toggle>
  <Toggle variant="outline" aria-label="مائل">
    <TextItalicIcon />
  </Toggle>
  <Toggle variant="outline" aria-label="تحته خط">
    <TextUnderlineIcon />
  </Toggle>
</div>

API Reference

Toggle wraps the Radix Toggle primitive and accepts all of its props — uncontrolled via defaultPressed or controlled via pressed + onPressedChange — plus the variant props below.

Prop	Type	Default
variant	"default" \| "outline"	"default"
size	"default" \| "sm" \| "lg"	"default"
pressed	boolean	—
defaultPressed	boolean	false
onPressedChange	(pressed: boolean) => void	—

Tokens used

8 design tokens consumed by the Toggle component.

--muted
Muted
hover:bg-mutedaria-pressed:bg-muted
--foreground
Foreground
hover:text-foreground
--input
Input
border-input
--ring
Ring
focus-visible:border-ringfocus-visible:ring-ring/50
--destructive
Destructive
aria-invalid:border-destructivearia-invalid:ring-destructive/20dark:aria-invalid:ring-destructive/40
--text-sm
Text Small (14px)
text-sm
--radius-md
Radius 0.8× (8px)
rounded-md
--spacing
Spacing unit (4px)
h-9min-w-9px-2.5gap-1