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 another 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
Do not use Segmented control for local navigation
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.
Do not use Segmented controls as On/Off toggles
Segmented controls are mainly used to change the visualization of certain data; toggles, on the other hand, are used to alternate 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.
Do not use Segmented controls for filters
Segmented controls are mainly used to change the visualization of certain data; filters, on the other hand, are used to show 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