Toggle

Powered by

Base UIShadcn UI

Installation

When to use

Toggle provides a two-state button control. Use this decision tree:

Usage

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

<Toggle>Toggle</Toggle>

Examples

Default

Outline

With Text

Small

Large

Disabled

Props

Keyboard interactions

Accessibility

• Renders as a real <button> with aria-pressed="true" | "false" — use it for on/off visual states (bold, italic, mute) rather than for navigation or mutually-exclusive selection (use Tabs / RadioGroup instead).
• Base UI also sets the compat data-state="on" | "off" attribute so existing Tailwind selectors keep working.
• Always provide a label — either visible text inside the toggle, or aria-label for icon-only toggles. Icon-only toggles without a label are unreadable to screen readers.
• onPressedChange is the Radix-style single-argument (pressed: boolean) => void.

Credits

• We use Base UI for the toggle component.
• We take our inspiration from Shadcn UI for the toggle style.