Toggle button
Toggle button
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.
Examples
How to use
Accessibility
- To make a single selection when switching between opposing yet mutually exclusive options.
- To visually prioritize options higher than
RadioButton
orSwitch
.
- 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:
Name | Type | Description | Default |
---|
Name | Type | Description | Default |
---|