Action
Toggle button
A button that stays pressed or unpressed, showing whether an option is on.
Demo
Sound is on
How to recognize it
Looks like an ordinary button, but its background or border changes while it is pressed. Often an icon button in a toolbar, such as Bold or Mute.
Behavior
- Each press flips between pressed and not pressed.
- The label stays the same; the pressed state is shown by the style and announced through aria-pressed.
- Several toggle buttons can be grouped, for example Bold, Italic, and Underline.
Keyboard
| Key | Action |
|---|---|
| Space | Presses or releases the button. |
| Enter | Presses or releases the button. |
Similar components
- Switch: A toggle button looks like a button and is often used in toolbars; a switch looks like a sliding knob and is used for settings.
- Button: A button runs an action once; a toggle button keeps an on or off state.
- Toolbar: A toggle button is one on/off button; a toolbar groups several buttons and moves between them with arrow keys.
Sources
- WAI-ARIA APG: Button Pattern (Toggle button) (Last checked: )
- MUI: Toggle Button (Last checked: )