The Segmented Control is a component that lets users toggle between up-to-4 options in a row.
A segmented control is a set of two or more button segments. Within the control, all segments are equal in width.
A segmented control is often used to switch between views of some data. Use a segmented control only when the options are predefined and are at most 4 options.
By default the segmented control has a height of
32px (the same as a button).
You should however keep things on the
8px grid or in some cases the
You should only need the following recommended heights.
SegmentedControl will automatically chose the text style to match whatever size is passed.