Toggle button
A toggle button is a control that lets users switch between two states — active and inactive — often used for formatting, selection, or view options.
Philosophy
Toggle buttons provide a compact way to turn options on or off in contexts where actions are reversible and visible immediately.
Suitable for formatting and filters. (e.g., bold, italic, grid view).
They support multi-select behavior when used in groups.
They keep the interaction inline, avoiding extra menus.
Anatomy
Variants
Icon + Text
Combines both for clarity.
Text Toggle Button
Uses a word or abbreviation.
Icon Toggle Button
Represents actions visually.
States
Idle
Neutral, not active.
Selected
Highlighted, showing active state.
Usage tips
Dos
Use toggle buttons for actions that can be turned on/off.
Group them when several formatting or filter options exist.
Don’ts
Don’t use toggle buttons for binary settings — use switches instead.
Don’t hide critical actions behind toggle buttons without clear labels.
Don’t mix toggle groups with unrelated actions.
Real-world example
