Segmented control

Work in progress

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.



The component is available in two different sizes.

Small2mu (32px)
Medium3mu (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.


The component is available with two or three segments. Each of them corresponds to a view.



Depending on the layout, the width of the Segmented control can fit its content or container.


Only one segment can be active at a time. Layout or format must change instantly when a segment is selected.


Good to know

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

Keep segment labels short and clear.
Don't use a segmented control as filters or tabs.
Never resize the width of a segment manually.