Toggle button

Also known as

Button group, Toggle button group, Toggle group, Segmented control

ToggleButton is a two-state button that the user can turn on or off. The corresponding action takes effect immediately. With ToggleButtonGroup, users can make a mutually exclusive selection from a set of related commands—with only one option selected at a time.

  • To make a single selection when switching between opposing yet mutually exclusive options.
  • To visually prioritize options higher than RadioButton or Switch.
  • To present an instantaneous or binary choice between two options. Instead, use Switch.
  • When the options in the group are not high priority and high affordance is not necessary. Instead, use RadioButtonGroup.
  • When all options in the group don’t need to be visible at once. Consider using Dropdown.
  • To present options in a toggle button group within a compact UI, or if they’re subject to change depending on context. Instead, use Pill.
  • Always style button text in all caps for prominence. This also avoids confusion with body text or general writing.
  • Never use ampersand (&) in button text to save space.
  • Keep the text description short, ideally one to three words and no more than five. If you’re including an icon with the text, use no more than three words.

To import ToggleButton and ToggleButtonGroup from the core Salt package, use: