Back to elements
ElementForm & InputFree
Toggle Button React component
A button that stays pressed: the fill grows out from the middle, icons spin into their 'on' version, labels roll from Follow to Following and counts tick up by one. Outline, soft and ghost styles, icon-only or with text.
When to use the Toggle Button component
Use Toggle Button for an on/off action that reads as a button: follow, subscribe, star, pin, or a formatting control like bold.
For a setting that takes effect like a switch (Wi‑Fi, dark mode), use Switch. For picking one of several, use Segmented Control or Button Group.
Installation
Add the Toggle Button component to your project with the shadcn CLI. It lands in components/toggle-button.tsx as plain React + Tailwind CSS source you own and can edit.
Install
Copied!
npx shadcn@latest add https://reactframe.com/r/toggle-button.jsonOr copy the source by hand and install its dependencies:
Install
Copied!
npm install motion clsx tailwind-mergeFAQ
- Is it accessible?
- It's a real button with aria-pressed, so screen readers announce it as a toggle, and Space and Enter work. Icon-only toggles need an aria-label.
- Can the label change when it's on?
- Yes. Pass pressedLabel and it rolls in over the normal label; the button keeps the width of the longer one so nothing jumps.
- Controlled or uncontrolled?
- Both. Use defaultPressed on its own, or pressed with onPressedChange.
