Quick Answer
A toggle button is a button that keeps a pressed or unpressed state after the user activates it.
Use a toggle button when a command behaves like an on/off state inside the current context: bold text, show grid, mute preview, pin panel, select a filter, or switch a view mode.
Do not use a toggle button for one-time actions like Save, Send, Delete, or Submit. Those are regular buttons. Do not use it for persistent system settings like "email notifications on/off" unless the component visually and semantically behaves like a switch.
Toggle Button vs Button vs Switch vs Checkbox
| Component | Use it for | State model |
|---|---|---|
| Button | Triggering an action once | No persistent pressed state |
| Toggle button | Turning a contextual command on/off | Pressed or unpressed |
| Switch | Changing a persistent setting immediately | On or off setting |
| Checkbox | Selecting one or more items or confirming agreement | Checked or unchecked |
The core question is: does this control need to show that it is currently active?
If yes, it may be a toggle. If it only performs an action and then returns to neutral, it is a button.
What a Toggle Button Means
A toggle button is still a button. The difference is that it exposes state.
Examples:
- Bold is active in a text editor.
- Grid view is selected in a gallery.
- "Show archived" is enabled in a list.
- A filter chip is active.
- Mute is turned on for a media preview.
The button's state should be visible without requiring users to remember what they just clicked.
Accessibility: Use aria-pressed
For web UI, a toggle button should usually be a native <button> with aria-pressed.
MDN describes aria-pressed as the state that tells assistive technology whether a toggle button is pressed. W3C's ARIA Authoring Practices button pattern also explains that toggle buttons use aria-pressed to communicate on/off state.
Basic example:
<button aria-pressed="false">Bold</button>
When active:
<button aria-pressed="true">Bold</button>
Important rule: keep the label stable when using aria-pressed.
Use:
<button aria-pressed="true">Mute</button>
Avoid changing the same button label from "Mute" to "Unmute" while also using aria-pressed. That can make the control harder to understand because the label and state both change. If the label itself changes, a regular button may be more appropriate.
When to Use a Toggle Button
Use a toggle button when all of these are true:
- The control is activated like a button.
- The result remains active after activation.
- The current state must be visible.
- The state applies to the current view, selection, document, or tool context.
- The user can turn it off by activating it again, unless it belongs to a required single-selection group.
Good examples:
- Text formatting controls: Bold, Italic, Underline.
- Canvas controls: Show grid, Snap to grid, Lock layer.
- List controls: Show archived, Hide completed, Compact mode.
- Media controls: Mute preview, Loop playback.
- Filter chips that can be selected and unselected.
When Not to Use a Toggle Button
Avoid toggle buttons for:
- One-time actions such as Save, Delete, Upload, Send, or Export.
- Navigation links that move users to another page.
- Form agreement choices that should be checkboxes.
- Persistent application settings that users expect to look like switches.
- Mutually exclusive choices where radio buttons or segmented controls communicate the model more clearly.
If users ask "Did this run?" rather than "Is this on?", the control is probably not a toggle.
Toggle Button vs Switch
Switches are best for settings that take effect immediately and persist outside the current small context.
Examples:
- Email notifications.
- Dark mode.
- Location sharing.
- Auto-save.
Toggle buttons are better for contextual tools or modes.
Examples:
- Bold text.
- Grid overlay.
- Show comments.
- Pin sidebar.
The visual difference matters because users bring expectations from mobile operating systems: a switch feels like a setting. A toggle button feels like a tool or selected command.
Toggle Groups
Toggle buttons often appear in groups. There are two common models.
Independent Toggle Group
Each toggle can be on or off independently.
Examples:
- Bold, Italic, Underline.
- Filter chips where multiple filters can apply.
- Layer visibility controls.
Exclusive Toggle Group
Only one option can be active at a time.
Examples:
- Left, center, right alignment.
- Grid, list, compact view.
- Day, week, month calendar view.
For exclusive groups, consider whether a segmented control or radio group would be clearer. If one option must always be selected, allow users to change the selection but not clear all choices.
Visual Design Rules
1. Make the Pressed State Obvious
Pressed state should not rely on color alone. Combine at least two cues:
- Background change.
- Border change.
- Icon fill or weight change.
- Checkmark or active indicator.
- Text weight or contrast change.
2. Preserve Focus Visibility
Keyboard users need to see which toggle currently has focus. Do not remove focus rings.
3. Keep Size Stable
Pressed and unpressed states should not resize the button. Changing width or layout on activation makes groups feel unstable.
4. Use Clear Labels or Recognizable Icons
Icon-only toggles are acceptable when the icon is familiar, such as Bold or Italic in an editor. Add accessible labels and tooltips for less obvious icons.
5. Avoid Ambiguous Active Colors
If the active state looks like a primary action button, users may not understand that it is a persistent state. Use a distinct selected style.
Implementation Checklist
Example: Formatting Toolbar
In a text editor, Bold, Italic, and Underline are independent toggles. Each can be active at the same time.
Good model:
<button aria-pressed="true" aria-label="Bold">B</button>
<button aria-pressed="false" aria-label="Italic">I</button>
<button aria-pressed="false" aria-label="Underline">U</button>
For alignment, the model is different. Left, center, and right alignment are mutually exclusive. One option should usually stay selected.
Common Mistakes
Using Toggle for Actions
"Save" should not stay pressed after being clicked. If the control triggers a process, use a normal button.
Making State Too Subtle
If the pressed style is only a slight color change, users may miss it. This is especially risky in toolbars and dense controls.
Changing the Label and aria-pressed
Do not make the same control say "Mute" in one state and "Unmute" in another while also using aria-pressed. Choose one state model.
Treating Switches and Toggles as Interchangeable
They both express binary state, but users interpret them differently. Switches feel like persistent settings. Toggle buttons feel like active tools or modes.
Related UIXHERO References
- Japanese source: トグルボタンとは？意味・使い方・Switchとの違い
- Related component: Switch
- Related component: Toggle Group
- Related component: Checkbox
- Related principle: Visibility of System Status
External References
- MDN: ARIA aria-pressed attribute
- W3C WAI-ARIA Authoring Practices: Button Pattern
- Apple Human Interface Guidelines: Toggles
FAQ
What is a toggle button in UI?
A toggle button is a button that keeps an on/off or pressed/unpressed state after activation. It is used for contextual commands such as Bold, Mute, Show grid, or selected filters.
What is the difference between a toggle button and a switch?
A switch changes a persistent setting. A toggle button changes a contextual tool state or selected command. If the control feels like an app or system setting, a switch is usually clearer.
Should toggle buttons use aria-pressed?
Yes, web toggle buttons should usually use a native button with aria-pressed so assistive technology can announce the pressed state.
Can a toggle group allow multiple selections?
Yes. Some toggle groups are independent, such as Bold, Italic, and Underline. Others are exclusive, such as text alignment or view mode selection.