A segmented control is used to switch between related views of information within the same context.
Examples
Default
Embed Figma master component
Embed Storybook
Variations
Embed Figma variations
Usage
A segmented control consists of a horizontal set of two or more segments, each of which functions as a button. One option is always selected. The component does not scroll horizontally.
When to use Segmented control
To represent the same kind of content, such as a list-view with different filters applied.
To provide closely related choices that affect an object, state, or view. For example, a segmented control can help people select options, switch between views, or sort elements.
When to consider something else
If you need to group content that is dissimilar (use Tabs instead).
If you need to enable actions, such as adding, removing, or editing content.
If it needs to be accompanied by any other controls or a title if used in the top navigation bar.
Placement
It appears in either the top navigation bar or below that navigation bar, near the top of the screen.
It should not be used in the bottom toolbar, because toolbar items act on the current screen — they don’t let people switch contexts.
Instances of this component in production
Active/Closed claims (see below, left image) and Upcoming/Past Appointments (both are the same data type - segmented control serves as a filter).
Code usage
Add link to Storybook
Content considerations
Keep labels to 1 word: If you need 2 (or more) words, you're likely trying to include extraneous words or group together items that are not similar enough. You may need to consider using a different component.
Consider if labels are used elsewhere on the screen: You can help differentiate different sections beneath the segmented control by not reusing the same labels.
Intro (title will not be published)
A segmented control is used to switch between related views of information within the same context.
Examples
Default
Variations
Usage
A segmented control consists of a horizontal set of two or more segments, each of which functions as a button. One option is always selected. The component does not scroll horizontally.
When to use Segmented control
When to consider something else
Placement
Instances of this component in production
Active/Closed claims (see below, left image) and Upcoming/Past Appointments (both are the same data type - segmented control serves as a filter).
Code usage
Add link to Storybook
Content considerations
Accessibility considerations
Related