Toggle
A single on or off button that stays pressed. Use it for a view option that applies at once, such as pinning or muting.
bunx --bun shadcn@4.17.0 add @waimakers/toggle- npm dependencies
- @base-ui/react@1.9.0class-variance-authority@0.7.1
From the registry
A pill toggle with a quiet pressed state, shared focus and invalid recipes.
Examples
Variants
Default sits flat until pressed. Outline keeps a border so it reads as a control at rest.
Sizes
Small for dense toolbars, default and large for touch.
With text
An icon with a label for options that need naming.
Summaries arrive after each meeting.
States
Pressed fills quietly with the sunken surface. Disabled refuses input. Focus draws the text-colour ring.