Segmented control
Please, note that the Segmented control is a beta component and it will be improved through the following sprints.
Segmented control allows users to switch from one view to another with the same data or information set.
What we call "view" is a display format. For example, it could be switching from a grid view to a list view or between different period formats, like daily, monthly or annual.
Variations
Sizes
The component is available in two different sizes.
| Variation | Height |
|---|---|
| Small | 2mu (32px) |
| Medium | 3mu (48px) |
These variations ensure consistency with other elements of the interface. Please, make choices according to the variation chosen for the other components, such as buttons or inputs.
Segments
The component is available with two or three segments. Each of them corresponds to a view.
Behaviours
Width
Depending on the layout, the width of the Segmented control can fit its content or container.
Selection
Only one segment can be active at a time. Layout or format must change instantly when a segment is selected.
States
Segments can't be disabled. Avoid using the segmented control if a view isn't yet developed.
How to use
Uses of Segmented control are quite different from Filter, Toggle and Tabs.
Please use one of these components when users need to filter, take binary actions or navigate.
Do's and Don'ts
Provide different display formats for lists, tables and data vizualizations