Skip to main content

Segmented Controls

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

Specifications

  • 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.

Anatomy

Segmented Controls Atoms

States

All segments controls should have the following states:

  • Default/Active
  • Focus
  • Disabled

Sizes

Segmented Controls Sizes

Styles

Segmented Controls Styles

Options

Segmented Controls Options

Last updated March 2, 2023.