Toggle

Toggle buttons are for toolbar/formatting actions (bold text, favorite item). Switches are for settings with instant effect (dark mode). Checkboxes are for form selections. Toggle looks like a button, Switch like a slider, Checkbox like a check box.

Use for formatting controls (bold, italic), view options (show/hide panel), or item state (favorite, bookmark). Toggles work well in toolbars and contexts where button-like appearance matches the interaction pattern better than switches or checkboxes.

Yes, either visible text, icons with tooltips, or aria-label for screen readers. Users need to understand what the toggle does. Icon-only toggles save space but require universal icons or tooltips for clarity.

Standard Toggles are binary, but you can style tri-state toggles for use cases like "select all" checkboxes (all, some, none selected). Keep it simple—most toggles should be clearly on or off for predictable behavior.

Usually no—Toggles imply instant, reversible actions. For destructive or important actions, use a Button with confirmation Dialog instead. Toggles should feel safe to experiment with, knowing effects are immediate and reversible.

Yes, this Figma Toggle component matches the shadcn/ui implementation exactly, ensuring your toggle buttons work consistently from design to production with proper pressed states and accessibility.