Toggle

Toggle is for a single pressed or unpressed state. It works well for formatting controls, toolbar actions, and independent display options where each control stands on its own. The Swiss variant keeps the shape spare, uses uppercase label rhythm when text is present, and adds repo-specific variant and size options for toolbars and compact controls.

Installation

Purchase access, then open /account/install to issue a registry token.

Usage

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

<Toggle aria-label="Toggle bold">B</Toggle>
<Toggle variant="outline" defaultPressed>
  Preview
</Toggle>

Why This Primitive Exists

Some binary controls belong in toolbars rather than forms. Toggle keeps those cases distinct from switches and checkboxes.

• Use it when one control turns one mode or formatting state on and off.
• Prefer it to a switch when the control reads like a toolbar action, not a settings row.
• Avoid it when the user must choose exactly one option from a set; that is a better fit for Toggle Group.

Examples

Basic Pressed State

The smallest useful toggle is a single icon or label with a clear aria-label.

Outline Variant

Use variant="outline" when the control sits on a field-like surface or needs stronger separation from the background.

<Toggle variant="outline" size="sm" aria-label="Toggle italic">
  <Italic />
</Toggle>

In Context

Independent view or formatting controls are a strong fit because each button can be pressed without implying exclusivity.

Guidance

Keep One Toggle To One Meaning

• Each toggle should control one state only.
• If several buttons are mutually exclusive, move to ToggleGroup.
• If the control is a persisted form field rather than a toolbar action, use Switch or Checkbox instead.

Label For Clarity

• Icon-only toggles need an aria-label.
• Text toggles should stay short so the control keeps a compact toolbar rhythm.
• Use the pressed state to confirm the active mode, not to replace clear labels.

Choose Variants Deliberately

• Use the default variant for toolbar-like controls on open surfaces.
• Use outline when the toggle needs to sit on denser cards, forms, or field-adjacent panels.
• Pick the smallest size that still remains easy to target in the surrounding layout.

API Reference

Toggle

Toggle composes @radix-ui/react-toggle and forwards the Radix root props together with repo-level size and variant options.

Exported Helper

Standard Radix and DOM props such as aria-label, name, value, and asChild also pass through unchanged.