A button that stays pressed.
FreeWeb and MobileMotion
Preview
npx shadcn add @fetaui/togglePlayground
Ghost
Outline
Disabled
Appearance
Content
Icons animation
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/toggle
Outline
A visible edge for a toggle that stands alone, usually with text.
Content
Accessibility
- A native button with aria-pressed.
- Icon only toggles need aria-label.
Motion
- Press scales to 0.96 and the state fades in over 160 ms.
- With reduced motion, the state fades and nothing scales.
Responsive behavior
- Height steps up on Mobile through the size tokens.
Performance
- Pressed color is a CSS transition, so a flip re-renders one button and nothing else.
- Press scales with a transform, so it never runs layout.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import from @/components/fetaui/toggle. It holds its own state unless you pass pressed.
- Without text, pass aria-label. children must be a plain string.
- Use appearance outline when it stands alone. Leave segment to Toggle Group, which owns the tray.
- Pair pressed with onPressedChange when the state lives in your app.
Related
Toggle GroupComponentToggles on one tray, for a single choice or several.Button GroupComponentRelated actions in one shape: Segmented, Attached or Toolbar. For a main action with a menu, use Split Button.SwitchComponentTurns a setting on or off and applies it at once.Icon ButtonComponentThe round sibling of Button, for an action one icon can explain.CheckboxComponentToggles between checked and not checked, with an indeterminate value for parents of a list.