Segmented Controller

Segmented controllers allow users to switch between related but mutually exclusive content or actions.
Demo and Developer GuidelinesFigma Component

Anatomy

Segment

The width of each segment can change depending on the text needed for the design, but each segment needs to be equal in size.

Label

Segmented controller labels can be an icon or a title, and they sit both horizontally and vertically centered within each segment. Labels are title case without punctuation.

Character count limit: 30

Types

Text

Text States

Icon

Icon States

Behavior

Specifications

Padding

Standard Padding

Color & Typography