Segmented Controls

A segmented control is a linear set of two or more segments, each of which functions as a button.

Within a segmented control, all segments are usually equal in width. Like buttons, segments can contain text or images. Segments can also have text labels beneath them (or beneath the control as a whole).
In general, keep segment size consistent.

Segmented Controls Atoms

All segments controls should have the following states:

Segmented Controls Sizes

Segmented Controls Styles

Segmented Controls Options