Toggle

A pressed/unpressed button for modes and formatting.

Default

<Toggle variant="outline" aria-label="Toggle bold">
  <Bold />
</Toggle>

<ToggleGroup multiple variant="outline" defaultValue={["bold"]}>
  <ToggleGroupItem value="bold" className="font-mono font-bold">B</ToggleGroupItem>
  <ToggleGroupItem value="italic" className="font-mono italic">I</ToggleGroupItem>
  <ToggleGroupItem value="strikethrough" className="font-mono line-through">S</ToggleGroupItem>
</ToggleGroup>

Sizes, labels, spacing & states

Size — sm, default, lg (Toggle and ToggleGroup)

Disabled — whole toggle or a single group item

Spacing — gap between items via the spacing prop

Vertical — orientation="vertical"

With Label — the label is children, not a label prop (icon optional)

Custom — pill items with an accent pressed state

{/* Size */}
<Toggle variant="outline" size="sm" />
<Toggle variant="outline" size="lg" />

{/* With Label — label is children, not a prop */}
<Toggle variant="outline"><Bold /> Bold</Toggle>
<Toggle variant="outline">Enable firewall</Toggle>

{/* Spacing */}
<ToggleGroup variant="outline" spacing={2}>…</ToggleGroup>

{/* Vertical */}
<ToggleGroup variant="outline" orientation="vertical" className="flex-col">…</ToggleGroup>

{/* Custom */}
<ToggleGroupItem className="rounded-full data-pressed:bg-accent/10 data-pressed:text-accent" />

With Label — pass the label as children (not a label prop), optionally alongside an icon.

Markdown for agents: /design/toggle.md · spec: /design.md