Segmented controls are used to display a set of two or more options, and requires that one option is always selected. Within the control, all options are equal in width and can contain text or icons.
Segmented control
Design
Structure
Track: outside container of the component that holds the individual options
Option control: an individual option that can be selected
Label: indicates what the option relates to
Icon: supporting illustration for the option
Variants
Text: default option that includes only a label in each option control
Text + Icon: a variant that includes both text and an icon for faster scalability. Not recommended in cases where there are more than 3 options.
Icon only: can be used when there is limited space available. Should always be paired with a delayed tooltip that provides a label for each option
Size
Depending on where the control is placed in the UI, different sizes can be selected. The size of the segmented control should match the size variant of the components around it.
For example, if it is placed to the left of a button group using the size=medium variant, the following size of selected control should be used.
Small
Small (32px)
Medium (36px)
Large (40px)
States
Default
Hover
Focused
Active
Disabled
Active, Disabled
Guidelines
Segmented controls can also be used to toggle varying views of related content. While similar to tabs in nature, the segmented control should keep the user within the same interface (no page rendering, etc) whereas tabs are used for navigational purposes.
Limit the number of options within the control. Typically 2-3 is the maximum. If any larger, consider a Radio group or Input select.
Be consistent with how options are shown. All options are either text-only, icon-only, or have both text and icon.
Use tooltips on hover for icon-only selected controls. Not all icons have a clear affordance to their action and should be accompanied by a delayed tooltip that appears after the user has hovered on the element for more than 300ms.
Use cases
Segmented controls are great for "multiple choice" or boolean type of inputs that default to one choice over another, while keeping all choices visible and easily discoverable:
am/pm
true/false
Before/After
Subscribe/unsubscribe
List/Grid view
Do
Try to limit the number of options to 3 or less, with a maximum of 5 accepted in the control
Option text should be a single word, for example in the campaign and template editor, the options are: Details, Design, Preview
Don't
Use icon-only variant without a delayed tooltip for the options. Also be sure to include aria-labels for each of the options so that it's still accessibile to those that may rely on a screen-reader to support their work
Modify the styles of the selected control. This includes height, icon color, borders, border radius, or other properties. Please reach out to the design system owner if the component's current styles don't fit your needs
Display more than 5 options, with the preferred count to be 3 options or less
Content
Option text should be a single word, for example in the campaign and template editor, the options are: Details, Design, Preview
All options are either text-only, icon-only, or have both text and icon. Icon-only options should always include a delayed tooltip for each option.
Accessibility
Ensure appropriate aria-labels are applied to each option in the control
Test color contrast ratios for various states to ensure text contrast meets the WCAG 2.2 4.5:1 contrast ratios
Validate that the focus order is correct for each option in the segmented control. Use Tab and Shift+Tab to focus and navigate through the options, and pressing Return on the keyboard activates the focused option
Health
Is documented
The component is fully documented
Accessibile
Tested against WCAG 2.1 AAA accessibility guidelines
Tokens
This component uses tokens in both Figma and code
Figma component
Includes a link to a Figma component that has been imported to Supernova