Toggle

A two-state button (pressed / not pressed) for stateful chrome like text-formatting buttons (bold / italic) or a pinned/unpinned state — pressed lights up with bg-accent. Reach for Switch instead when it's a labelled settings preference, and for mutually-exclusive choices group items with ToggleGroup. Variants: default is a borderless ghost that disappears into a toolbar; outline adds a border for a standalone control that needs an edge. Sizes: sm (28px) for dense toolbars and table rows, md (32px, default) for standalone controls, lg (36px) for hero presence.

Default

<Toggle aria-label="Toggle italic">
  <Italic />
</Toggle>

Outline

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

With text

<Toggle aria-label="Toggle italic">
  <Italic /> Italic
</Toggle>

Sizes

<>
  <Toggle size="sm" aria-label="Bold"><Bold /></Toggle>
  <Toggle size="md" aria-label="Bold"><Bold /></Toggle>
  <Toggle size="lg" aria-label="Bold"><Bold /></Toggle>
</>

Default pressed

<Toggle defaultPressed aria-label="Toggle bold">
  <Bold />
</Toggle>

Disabled

<>
  <Toggle disabled aria-label="Bold"><Bold /></Toggle>
  <Toggle variant="outline" disabled defaultPressed aria-label="Italic"><Italic /></Toggle>
</>

Props

Prop	Type	Default
variant	"default" \| "outline"	"default"
size	"sm" \| "md" \| "lg"	"md"
pressed	boolean	—
defaultPressed	boolean	false
onPressedChange	(pressed: boolean) => void	—
disabled	boolean	false
…rest	Radix Toggle.Root props	—

Source

packages/react/src/components/toggle.tsx · Figma node 2819:31491