Segmented Controller
Segmented controllers allow users to switch between related but mutually exclusive content or actions.
Demo and Developer GuidelinesAnatomy
Segment
The width of each segment can change depending on the text needed for the design, but each segment needs to be equal in size.
Label
Segmented controller labels can be an icon or a title, and they sit both horizontally and vertically centered within each segment. Labels are title case without punctuation.
Types
Text
Text States
Icon
Icon States
Behavior
Here are some best practices we recommend for using segmented controllers:
Segmented controllers can be used to control the view of a layout within the body, modal, or panel on a page. Views should be related, but mutually exclusive. We recommend using up to 3 options for a Segmented controller.
Do not use segmented controllers to make selections between choices. Changing views with a segmented controller does not require a Save/Apply action, as the view changes instantaneously when selected.
Do not use segmented controllers to make selections between choices. Changing views with a segmented controller does not require a Save/Apply action, as the view changes instantaneously when selected.
Tooltips can be used for each segment if needed.
Specifications
Padding
Color & Typography
