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

State Example Height Use
Text only

Segmented Controls With Text

56dp Form
Default

Segmented Controls With Text

56dp Form
Floating

Segmented Controls Floating

56dp Floating content

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

Behaviors

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

Segmented Controls Primary

Segmented Controls Secondary

Focus

Segmented Controls Primary Focus

Segmented Secondary Focus

Disabled

Segmented Controls Primary Disabled

Segmented Controls Secondary Disabled

OEM Branding

  • Use the primary and secondary button colors

Segmented Controls OEM

View on GitHub