Status
The status of the component
Component checklist
Ready for use!
Figma component
A link to the Figma library where the component lives.
Repository
A link to the repo where the component lives.
Usage
Best Practices
- It is strongly recommended to only have up to 5 options within a segmented control.
- The transition between visualization options should be immediate and it should not direct to anther page.
- Since we are dealing with data visualization, one option should always be selected.
- It is strongly recommended to only allow 1 state at a time.
- Add hover, focus and active states.
- Do not resize the segmented control beyond its original constraints.
- A segmented control with icons only should ALWAYS have tooltips on hover that explain better the context of the action depicted.
Dos and Don’ts
When to use a Segmented Control VS Tabs
Segmented controls are mainly used for changing the visualization of certain data, tabs on the other hand, are used for local navigation.
Do
Use the segmented control for data visualization settings.
Don't
Avoid using the segmented control for local navigation, use tabs instead.
When to use Segmented Control VS a Toggle
Segmented controls are mainly used for changing the visualization of certain data, toggles on the other hand, are used for alternating between two states.
Do
Use the segmented control for data visualization settings or groups of actions.
Don't
Avoid using the segmented control to alternate between two states, use toggles instead.
When to use Segmented Control VS Filters
Segmented controls are mainly used for changing the visualization of certain data, filters on the other hand, are used for showing curated elements within that data.
Do
Use the segmented control for data visualization settings or groups of actions.
Don't
Avoid using the segmented control to hide/show specific elements within a group of data, use filters instead.
Keep content consistent
Do
Maintain the consistency of all the options within a segmented control.
Don't
Do not alternate between different content types (Icons, labels, icons+labels) in a single segmented control.
Use clear labels
Do
Use clear and to-the-point language.
Don't
Limit the label length and do not use punctuation marks.
Use title case
Do
Button labels should always be in title case.
Don't
Avoid using text formats aside from title case should not be used.
Related Components & Patterns