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.


State Example Height Use
Text only

Segmented Controls With Text

56dp Form

Segmented Controls With Text

56dp Form

Segmented Controls Floating

56dp Floating content

Note: In-cab size only. See mobile patterns (coming soon) for smaller options if required.


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

Segments Controls Progression

All segments controls should have the following states:

  • Default/Active
  • Focus
  • Disabled
State Primary Secondary

Segmented Controls Primary

Segmented Controls Secondary


Segmented Controls Primary Focus

Segmented Secondary Focus


Segmented Controls Primary Disabled

Segmented Controls Secondary Disabled

OEM Branding

  • Use the primary and secondary button colors

Segmented Controls OEM