UI Component Lab 日本語

← All components

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

KeyAction
SpacePresses or releases the button.
EnterPresses or releases the button.
  • 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