Toggle

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

Powered by

Base UIShadcn UI

Installation

npx shadcn@latest add @redpanda/toggle

pnpm dlx shadcn@latest add @redpanda/toggle

yarn dlx shadcn@latest add @redpanda/toggle

bunx shadcn@latest add @redpanda/toggle

nubx shadcn@latest add @redpanda/toggle

aube dlx shadcn@latest add @redpanda/toggle

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 uses the Base UI signature (pressed: boolean, eventDetails) => void — eventDetails lets you inspect the change reason or call preventDefault(). Single-argument callbacks remain compatible.

Credits

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