Toggle

PreviewCopy Anchor Link

Use Toggle for an action with a persistent pressed state, such as text formatting or a view option.

InstallationCopy Anchor Link

pnpm dlx shadcn@latest add https://migoy.stanleyaf.com/r/toggle.json

Uses Base UI, the existing cn utility, and semantic theme tokens. See the registry guide for endpoint details.

UsageCopy Anchor Link

Use defaultPressed to set the initial state. Use pressed and onPressedChange when another component owns the state.

Toggle supports default and outline variants and Migoy's sm (24px), default (32px), and lg (44px) control sizes. The pressed state uses the accent background and foreground.

Keyboard and accessibilityCopy Anchor Link

• Use a stable label so assistive technology can announce the same action as pressed or unpressed.
• Give icon-only toggles an accessible name using aria-label.
• Press Enter or Space to toggle the focused button. Use disabled to prevent interaction.
• Use Switch for an on/off setting.

Based on shadcn Toggle and Base UI Toggle.