Components
Segment
Picks one of two or three options that sit side by side, like a view or a time range. The Designer / Developer switch on this page is a Segment.
Playground
Figma variant
Segment
👕 Size=Medium
Count=3
Fluid=False
Form Spacing=False
Disable=False
.Segment Item
Type=DefaultItem types
An item is text, text with an icon on either side, text with a count badge, or text with a small info icon.
Sizes and width
Medium and Small. Fluid stretches the segment and shares the width between the items.
| Size | Height | Track padding | Item padding | Radius | Text | Icon |
|---|---|---|---|---|---|---|
| medium | 40px | --space-micro | --space-micro --space-small | --radius-form-element | ui/text/regular | 16px |
| small | 32px | --space-micro | --space-micro --space-tiny | --radius-form-element-small | ui/text small/regular | 12px |
States
The chosen item is a raised surface/level-1 pill with primary text. Disabled greys the track and the text.
Tokens
| Part | Token |
|---|---|
| Track | --color-surface-level-3 |
| Chosen item | --color-surface-level-1, --shadow-card-style-1 |
| Chosen text | --color-primary |
| Text | --color-foreground-high-emphasis |
| Disabled track | --color-surface-level-2, --color-surface-level-4 line |
| Disabled text | --color-foreground-low-emphasis |
Notes from Figma
- The fluid segments have a raw 8px radius in both sizes, the others the form element radius (12px Medium, 8px Small); code uses the size’s radius.
- Disabled active items keep primary text for the icon, info and badge types but not for the default type; code uses low-emphasis text for all.
- Figma has no hover or focus state; code adds the primary focus ring for keyboard users.
- Medium Info items put 8px between the text and the 12px icon, Small Info items 4px and an 8px icon.
Figma to code
| Figma | React |
|---|---|
| 👕 Size = Medium / Small | size='medium' / 'small' |
| Count = 2 / 3 | options.length |
| Fluid / Disable / Form Spacing | fluid / disabled / spacing |
| .Segment Item Type = Left Icon / Right Icon | { icon, iconPosition: 'start' | 'end' } |
| .Segment Item Type = Badge / Info | { badge } / { info: true } |
| .Segment Item Active = True | value |