A row of named choices in one bar, one of which is selected, with the selected one raised.
Options
| Choice | Values | Default | What it does |
|---|---|---|---|
sizesmbk-segmented--size-<value> | lgmdsm | lg | |
item-widthsmbk-segmented--item-width-<value> | equalhug | equal | Equal: every item as wide as the widest, so they share the bar equally, and fill it when the bar is given a width; Figma's items fill their bar this way. Hug: each item as wide as its words. Not in Figma, which draws equal only. |
contentsmbk-segmented--content-<value> | labelicondescription | label | What each item shows. Label: its words, with an icon before them when it has one. Icon: its icon alone (or a short word, for a choice with no icon), its label still the choice's name and shown in a tooltip while pointed at or focused. Description: its label with a short line under it, the bar growing to hold it. Figma's segment item calls this Content: Label, Icon only, Label and description. One for the whole bar. |
looksmbk-segmented--look-<value> | standardtheme | standard | Standard: the bar as Figma's segmented control draws it. Theme: the theme switch's look, for a bar of icons alone: square items, each icon a step larger than the standard bar's at its size, and an icon hovered in the brand text color. The theme switch draws it. |
Examples
Usage
One bar, one choice, the chosen one raised.
Sizes
Three heights.
With icons
An icon before each label.
Disabled option
A choice that cannot be made.
Hugging the words
Each choice as wide as its words, where the default makes them all as wide as the widest.
Filling its space
Given a width, the equal choices share it.
Guidelines
Purpose
Two to five named choices side by side in one bar, one of them chosen, taking effect at once: a view switch, a period picker, a unit toggle. It is a radio group that looks like a control rather than a list.
When to use
- Switching between views of the same content: day, week, month.
- A setting with a few named values that all fit in a row.
When not to use
- More than five choices, or long labels. Use the select.
- Choices that are not exclusive. Use checkboxes or chips.
- Navigation between pages. Use tabs.
Usage rules
Do
- Give every item roughly the same label length so the bar reads as one control.
- Keep a choice made whenever what the page shows is one of the choices.
Don't
- Leave nothing chosen without saying what the page shows instead.
Give every choice a label of about the same length, so the bar reads as one control.
One long label makes every segment as wide as itself and stretches the bar far past what the other choices need.
Keep a choice made whenever what shows is one of the choices, so the bar says what is showing.
A bar with nothing chosen and nothing beside it to say why leaves the reader guessing what the view shows.
Anatomy
- The block, the bar: drawn as the tabs' bar is, a canvas well with a hairline border at the large, medium or small control height, its items the smallest inset in from its edge and apart and as tall as the bar inside it. Its items are equal by default, each as wide as the widest, sharing any width the bar is given; or each hugs its words.
- The indicator part, first in the bar: the chosen item's raised surface as one piece, which slides from choice to choice. Drawn only once the wrapper has placed it.
- The item part, one per choice, holding a hidden radio, an optional icon and a label. The chosen item sits on the raised surface with a highlight edge: the indicator's, or its own where there is no indicator.
- The icon part and the label part inside each item.
- What each item shows is set for the whole bar by the content axis. Label: the words, with the icon before them. Icon: the icon alone, or the short part, a short word, for a choice without an icon; the label stays in the item, hidden from view, as the radio's name. Description: the label with the description part, a short line of small text, under it; the bar grows to hold it.
- The look axis sets how the bar is drawn. Standard is the bar above. Theme is the theme switch's look, for a bar of icons alone: items about as wide as they are tall, each icon a step larger than the standard bar's at its size, and an icon hovered in the brand text color. The items take the type of the page around them, since they hold no words.
Behavior
Choosing raises the chosen item and lowers the previous one: the raised surface slides from the old choice to the new one with the state motion, and the words change color with the feedback motion. Hover colors a label and its icon with the link hover text, or an icon with the brand text in the theme look. In a bar of icons alone, pointing at an item or moving the keyboard focus to it shows its label in a tooltip under it, which stays while pointed at and goes on Escape; a touch shows none, so the bar's own name and the chosen icon must make the choices clear. A key for the whole control (shortcut), such as one that steps to the next choice, shows after the control's name in a tooltip under the bar while it is pointed at or holds the keyboard focus; in a bar of icons alone it shows in each item's tooltip, after the item's name. An item shown as an icon alone can take a key of its own, shown in its tooltip in place of the control's. The control only shows the key: the page listens for it. Arrow keys move the choice; the change takes effect at once, whatever the motion. A change of size, or items growing as fonts load, moves the surface at once rather than sliding. Under reduced motion the raised surface lands at once and the color still fades.
On a touch screen the bar keeps its size, and each item takes an invisible press area out to the comfortable touch target above and below it and halfway to the next item.
A bar may have nothing chosen when what the page shows is none of its choices, such as days picked on a calendar beside a bar of periods. Give value an empty string: no item is raised, and the next choice lands at once rather than sliding. A bar with neither value nor defaultValue also starts with nothing chosen. A reader can change the choice but never clear it, so only the page can go back to nothing chosen.
Accessibility
What it does for you
- The bar carries the radio-group role. Each item is a real radio in a label, so the group behaves as radios do for keyboard and assistive technology.
- An item showing its icon alone keeps its label as its radio's name; the tooltip shows the same words and is hidden from assistive technology. A short word in place of an icon is hidden from it too.
- A description is read after the choice's name, as its description.
- The chosen state is shown by fill, edge and elevation as well as color.
- In a forced-color mode, the chosen item is drawn in the system's highlight colors.
- In a bar of icons alone, moving the keyboard focus to an item shows its label in a tooltip, which goes on Escape.
- A key is told to screen readers as
aria-keyshortcuts: the whole control's on the group, an item's own on its radio. The tooltip showing it stays hidden from them. - On a touch screen each item takes an invisible press area out to the comfortable touch target above and below it and halfway to the next item.
What you must do
- Give the bar an accessible name; the wrapper requires one.
- For a bar of icons alone, make the bar's own name and the chosen icon clear the choices, since a touch shows no tooltip.
- With nothing chosen, say in words near the bar what the page shows, since the bar no longer does.
- Listen for a key you give the control or an item, and choose as it says: the control only shows and names the key. Take a single key only outside text fields.
How to test
- Tab to the bar: focus lands on the chosen item. The arrow keys move the choice, which takes effect at once.
- With nothing chosen, Tab lands on the first item and Space chooses it.
- In a bar of icons alone, an item's label shows in a tooltip when focus reaches it, and Escape hides it.
- With a screen reader, the bar is read as a group by its name, and each item as a radio by its label, with whether it is chosen and its place in the group.
- With text at 200% and the page 320 pixels wide, the items stay whole and reachable.
- In a forced-color mode, the chosen item is still told from the others.
Keyboard
| Key | What it does |
|---|---|
| Tab | Moves focus into the bar, to the chosen item or, with nothing chosen, the first, and out of it. |
| Down ArroworRight Arrow | Moves the choice to the next item. |
| Up ArroworLeft Arrow | Moves the choice to the previous item. |
| Space | With nothing chosen, chooses the focused item. |
| Escape | Hides the tooltip: an item's label in a bar of icons alone, or the bar's own name and key. |
Source
The files the segmented control is made of. Its folder on GitHub (opens in a new tab) holds them with its wrapper and its document.
Stylesheet
/* smbk-segmented — Segmented control. Figma "SegmentedControl" 4209:19853 and "SegmentItem" 4207:19346.
* Drawn as the tabs' bar is: a canvas well
* at a control height, its items the smallest inset in from its edge and
* apart, filling its height. Items are real radios inside labels, so only one
* can be chosen and arrow keys move between them. The chosen item sits on the
* raised surface, drawn by an indicator that slides from choice to choice
* once the wrapper has placed it (motion rules at the end).
* The items are columns of one row: equal by default, as Figma's items fill
* their bar, each as wide as the widest and sharing any width the bar is
* given; or each hugging its words. An item shows its words, its icon alone
* (its words hidden but still its name, and shown in a tooltip by the
* wrapper), or its words with a short line under them (content axis).
* The theme look is the theme switch's: near-square items, a larger icon and the
* brand hover (look rules after the sizes). */
.smbk-segmented {
position: relative;
box-sizing: border-box;
display: inline-grid;
grid-auto-columns: 1fr;
grid-auto-flow: column;
align-items: stretch;
gap: var(--smbk-space-inset-2xs);
height: var(--smbk-size-control-lg);
/* Figma counts the edge in the bar's size and puts the padding inside it, so the items sit the smallest inset
plus the edge's width in from the outer edge, leaving the smallest inset between an item and the edge: the
large bar is 48 tall and its items 42. */
padding: var(--smbk-space-inset-2xs);
border: var(--smbk-border-width-hairline) solid var(--smbk-color-border-subtle);
border-radius: var(--smbk-radius-control-lg);
background: var(--smbk-color-surface-canvas);
}
.smbk-segmented__item {
box-sizing: border-box;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--smbk-space-inline-sm);
padding: 0 var(--smbk-space-inset-xl);
border: var(--smbk-border-width-hairline) solid transparent;
border-radius: var(--smbk-radius-control-md);
color: var(--smbk-color-text-subtle);
font-family: var(--smbk-typography-body-md-font-family);
font-size: var(--smbk-typography-body-md-font-size);
font-weight: var(--smbk-typography-body-md-font-weight);
line-height: var(--smbk-typography-body-md-line-height);
letter-spacing: var(--smbk-typography-body-md-letter-spacing);
/* Figures of one width in the label, its short line and a short word, so a count that changes ("Short 8" to
"Short 9") keeps its item's width and never moves the bar or what follows it on the line. */
font-variant-numeric: tabular-nums;
white-space: nowrap;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
@media (hover: hover) {
.smbk-segmented__item:hover {
color: var(--smbk-color-text-link-hover);
}
}
/* .smbk-segmented__control: hidden from view, kept for screen readers and the keyboard, by the shared rule in visually-hidden/visually-hidden.css. */
.smbk-segmented__item:has(.smbk-segmented__control:checked) {
background: var(--smbk-color-surface-raised);
border-color: var(--smbk-color-border-rim);
color: var(--smbk-color-text-default);
box-shadow: var(--smbk-elevation-control);
}
/* The chosen item's surface as one piece that slides from choice to choice. The wrapper places it
over the chosen item and marks the bar; until then (markup written by hand, or before the page's
script runs) it is not drawn and the chosen item draws its own surface, which looks the same at
rest. It comes first in the bar, and the items are positioned, so they paint over it. */
.smbk-segmented__indicator {
display: none;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
border: var(--smbk-border-width-hairline) solid var(--smbk-color-border-rim);
border-radius: var(--smbk-radius-control-md);
background: var(--smbk-color-surface-raised);
box-shadow: var(--smbk-elevation-control);
pointer-events: none;
}
.smbk-segmented[data-indicator] > .smbk-segmented__indicator {
display: block;
}
.smbk-segmented[data-indicator] > .smbk-segmented__item:has(.smbk-segmented__control:checked) {
background: transparent;
border-color: transparent;
box-shadow: none;
}
/* Figma's focus: a ring in the focus color, one ring-width out from the item's edge. */
.smbk-segmented__item:has(.smbk-segmented__control:focus-visible) {
outline: var(--smbk-focus-ring-width) solid var(--smbk-color-border-focus);
outline-offset: var(--smbk-focus-ring-offset);
}
.smbk-segmented__item:has(.smbk-segmented__control:disabled) {
color: var(--smbk-color-text-disabled);
cursor: not-allowed;
}
/* The icon follows the text: 20 beside Body MD, 16 beside Body SM. */
.smbk-segmented__icon {
font-size: var(--smbk-size-icon-md);
}
/* ---- content: icon. The icon alone, or a short word for a choice without one, at the size's side padding as Figma
draws it (44 by 34 at md); the label stays in the item, hidden from view, as the radio's name. ---- */
/* .smbk-segmented--content-icon .smbk-segmented__label: hidden from view, kept for screen readers and the keyboard, by the shared rule in visually-hidden/visually-hidden.css. */
/* ---- item width: hug, each item as wide as its words, at the start of a bar given more room ---- */
.smbk-segmented--item-width-hug {
grid-auto-columns: auto;
justify-content: start;
}
/* ---- sizes: the bar is the large, medium or small control height. The medium item keeps the
large one's type and icon and pads less; the small one steps the type, icon and gap down too ---- */
.smbk-segmented--size-md {
height: var(--smbk-size-control-md);
}
.smbk-segmented--size-md .smbk-segmented__item {
padding: 0 var(--smbk-space-inset-lg);
}
.smbk-segmented--size-sm {
height: var(--smbk-size-control-sm);
border-radius: var(--smbk-radius-control-md);
}
.smbk-segmented--size-sm .smbk-segmented__item {
gap: var(--smbk-space-inline-xs);
padding: 0 var(--smbk-space-inset-md);
border-radius: var(--smbk-radius-control-sm);
font-family: var(--smbk-typography-body-sm-font-family);
font-size: var(--smbk-typography-body-sm-font-size);
font-weight: var(--smbk-typography-body-sm-font-weight);
line-height: var(--smbk-typography-body-sm-line-height);
letter-spacing: var(--smbk-typography-body-sm-letter-spacing);
}
.smbk-segmented--size-sm > .smbk-segmented__indicator {
border-radius: var(--smbk-radius-control-sm);
}
.smbk-segmented--size-sm .smbk-segmented__icon {
font-size: var(--smbk-size-icon-sm);
}
/* ---- content: description. The label, with its icon before it, over a line of Body XS in the subtle text color,
at the text label step (the line heights give the air between them) and the large inset over and under, the edge
given back, centred, as Figma's item draws it at every size (66 tall at lg); the bar grows to hold them. These come
after the sizes, so they win over a size's bar height, its item padding and its gap. ---- */
.smbk-segmented--content-description {
height: auto;
}
.smbk-segmented--content-description .smbk-segmented__item {
flex-wrap: wrap;
align-content: center;
row-gap: var(--smbk-space-text-label);
padding-block: calc(var(--smbk-space-inset-lg) - var(--smbk-border-width-hairline));
white-space: normal;
text-align: center;
}
.smbk-segmented__description {
flex-basis: 100%;
color: var(--smbk-color-text-subtle);
font-family: var(--smbk-typography-body-xs-font-family);
font-size: var(--smbk-typography-body-xs-font-size);
font-weight: var(--smbk-typography-body-xs-font-weight);
line-height: var(--smbk-typography-body-xs-line-height);
letter-spacing: var(--smbk-typography-body-xs-letter-spacing);
}
.smbk-segmented__item:has(.smbk-segmented__control:disabled) .smbk-segmented__description {
color: var(--smbk-color-text-disabled);
}
/* ---- look: theme, the theme switch's (Figma "ThemeSwitch" 4209:19857 and "ThemeItem" 4207:19190) ----
A row of items, each as tall as the bar inside its inset and edge and as wide as the bar's height less its two insets, holding its icon alone, the icon a step
larger than the standard bar's: 24, 20 and 16 at the large, medium and small sizes. An item takes the type of the
page around it rather than the bar's label type, and hovers in the brand text color, where the standard item
takes the link hover, as Figma's ThemeItem draws it. A chosen item that is hovered keeps its default text color. ---- */
.smbk-segmented--look-theme {
display: inline-flex;
}
.smbk-segmented--look-theme .smbk-segmented__item {
flex-shrink: 0;
gap: normal;
width: calc(var(--smbk-size-control-lg) - 2 * var(--smbk-space-inset-2xs));
padding: 0;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
letter-spacing: inherit;
white-space: inherit;
}
.smbk-segmented--look-theme.smbk-segmented--size-md .smbk-segmented__item {
width: calc(var(--smbk-size-control-md) - 2 * var(--smbk-space-inset-2xs));
}
.smbk-segmented--look-theme.smbk-segmented--size-sm .smbk-segmented__item {
width: calc(var(--smbk-size-control-sm) - 2 * var(--smbk-space-inset-2xs));
}
.smbk-segmented--look-theme .smbk-segmented__icon {
font-size: var(--smbk-size-icon-lg);
}
.smbk-segmented--look-theme.smbk-segmented--size-md .smbk-segmented__icon {
font-size: var(--smbk-size-icon-md);
}
.smbk-segmented--look-theme.smbk-segmented--size-sm .smbk-segmented__icon {
font-size: var(--smbk-size-icon-sm);
}
@media (hover: hover) {
:where(.smbk-segmented--look-theme) .smbk-segmented__item:hover {
color: var(--smbk-color-text-brand);
}
}
/* ---- motion: the indicator slides to the chosen item with the state purpose, as a switch's thumb
does, and the words change color with the feedback purpose. Under reduced motion the indicator lands at
once and the color still fades. ---- */
.smbk-segmented__item {
transition: color var(--smbk-motion-feedback-duration) var(--smbk-motion-feedback-easing);
}
.smbk-segmented[data-indicator] > .smbk-segmented__indicator {
transition-property: translate, width, height;
transition-duration: var(--smbk-motion-state-duration);
transition-timing-function: var(--smbk-motion-state-easing);
}
/* Set by the wrapper while it places the indicator without a slide. */
.smbk-segmented[data-indicator] > .smbk-segmented__indicator[data-instant] {
transition: none;
}
@media (prefers-reduced-motion: reduce) {
.smbk-segmented[data-indicator] > .smbk-segmented__indicator {
transition: none;
}
}
/* ---- touch: every item takes an invisible press area ----
On a touch screen an invisible area, centred on each item, takes the press out to the comfortable target above and
below, and side to side only halfway into the gap between two items, so each stays one press. The bar, the items,
the indicator and every place stay as drawn. */
@media (pointer: coarse) {
.smbk-segmented__item::after {
content: '';
position: absolute;
inset: min(0%, (100% - var(--smbk-size-target-comfortable)) / 2);
}
.smbk-segmented__item ~ .smbk-segmented__item::after {
inset-inline-start: max(min(0%, (100% - var(--smbk-size-target-comfortable)) / 2), var(--smbk-space-inset-2xs) / -2);
}
.smbk-segmented__item:has(~ .smbk-segmented__item)::after {
inset-inline-end: max(min(0%, (100% - var(--smbk-size-target-comfortable)) / 2), var(--smbk-space-inset-2xs) / -2);
}
}
/* ---- high contrast (forced colors) ---- */
/* In Windows high-contrast mode the browser drops fills and shadows; this puts the meaning back with the
user's own colors. Nothing here applies outside that mode. */
@media (forced-colors: active) {
.smbk-segmented__item:has(.smbk-segmented__control:checked) {
forced-color-adjust: none;
border-color: Highlight;
background: Highlight;
color: HighlightText;
box-shadow: none;
}
.smbk-segmented__item:has(.smbk-segmented__control:checked:focus-visible) {
outline-color: CanvasText;
}
.smbk-segmented__indicator {
border-color: Highlight;
background: Highlight;
}
.smbk-segmented__item:has(.smbk-segmented__control:disabled),
.smbk-segmented__item:has(.smbk-segmented__control:disabled) .smbk-segmented__description {
color: GrayText;
}
}Tokens it reads
| Token and CSS | Value | Preview | Foundation |
|---|---|---|---|
| space.inset.2xs--smbk-space-inset-2xs | 2px | Spacing | |
| size.control.lg--smbk-size-control-lg | comfortable: 48pxcompact: 40pxchanges with density | Size | |
| border-width.hairline--smbk-border-width-hairline | 1px | Border width | |
| color.border.subtle--smbk-color-border-subtle | light: #c4cdd8dark: #2d3237changes with theme | Color | |
| radius.control.lg--smbk-radius-control-lg | 8px | Radius | |
| color.surface.canvas--smbk-color-surface-canvas | light: #e7ebf0dark: #111213changes with theme | Color | |
| space.inline.sm--smbk-space-inline-sm | comfortable: 6pxcompact: 4pxchanges with density | Spacing | |
| space.inset.xl--smbk-space-inset-xl | comfortable: 16pxcompact: 12pxchanges with density | Spacing | |
| radius.control.md--smbk-radius-control-md | 6px | Radius | |
| color.text.subtle--smbk-color-text-subtle | light: #4e555edark: #9ba5b1changes with theme | Color | |
| typography.body-md--smbk-typography-body-md-font-family--smbk-typography-body-md-font-size--smbk-typography-body-md-font-weight--smbk-typography-body-md-line-height--smbk-typography-body-md-letter-spacing--smbk-typography-body-md-text-transform | fontFamily: Geist, Geist Fallback, system-ui, sans-seriffontSize: 16pxfontWeight: 400lineHeight: 1.5letterSpacing: 0px | The quick brown fox | Typography |
| color.text.link-hover--smbk-color-text-link-hover | light: #111213dark: #f3f5f8changes with theme | Color | |
| color.surface.raised--smbk-color-surface-raised | light: #f9fafbdark: #232527changes with theme | Color | |
| color.border.rim--smbk-color-border-rim | light: #ffffffe6dark: #ffffff0dchanges with theme | Color | |
| color.text.default--smbk-color-text-default | light: #232527dark: #e7ebf0changes with theme | Color | |
| elevation.control--smbk-elevation-control | light: 0px 0px 1px 0px #373d430d, 0px 1px 2px 0px #373d431a, 0px 2px 4px 0px #373d430ddark: 0px 0px 1px 0px #0000001a, 0px 1px 2px 0px #00000026, 0px 2px 4px 0px #0000001a | Elevation | |
| focus.ring.width--smbk-focus-ring-width | 2px | Focus | |
| color.border.focus--smbk-color-border-focus | light: #cc0d0ddark: #f34336changes with theme | Color | |
| focus.ring.offset--smbk-focus-ring-offset | 2px | Focus | |
| color.text.disabled--smbk-color-text-disabled | light: #7c8692dark: #606a75changes with theme | Color | |
| size.icon.md--smbk-size-icon-md | 20px | Size | |
| size.control.md--smbk-size-control-md | comfortable: 40pxcompact: 32pxchanges with density | Size | |
| space.inset.lg--smbk-space-inset-lg | comfortable: 12pxcompact: 8pxchanges with density | Spacing | |
| size.control.sm--smbk-size-control-sm | comfortable: 32pxcompact: 28pxchanges with density | Size | |
| space.inline.xs--smbk-space-inline-xs | 4px | Spacing | |
| space.inset.md--smbk-space-inset-md | comfortable: 8pxcompact: 6pxchanges with density | Spacing | |
| radius.control.sm--smbk-radius-control-sm | 4px | Radius | |
| typography.body-sm--smbk-typography-body-sm-font-family--smbk-typography-body-sm-font-size--smbk-typography-body-sm-font-weight--smbk-typography-body-sm-line-height--smbk-typography-body-sm-letter-spacing--smbk-typography-body-sm-text-transform | fontFamily: Geist, Geist Fallback, system-ui, sans-seriffontSize: 14pxfontWeight: 400lineHeight: 1.5letterSpacing: 0px | The quick brown fox | Typography |
| size.icon.sm--smbk-size-icon-sm | 16px | Size | |
| space.text.label--smbk-space-text-label | 0px | Spacing | |
| typography.body-xs--smbk-typography-body-xs-font-family--smbk-typography-body-xs-font-size--smbk-typography-body-xs-font-weight--smbk-typography-body-xs-line-height--smbk-typography-body-xs-letter-spacing--smbk-typography-body-xs-text-transform | fontFamily: Geist, Geist Fallback, system-ui, sans-seriffontSize: 12pxfontWeight: 400lineHeight: 1.5letterSpacing: 0px | The quick brown fox | Typography |
| size.icon.lg--smbk-size-icon-lg | 24px | Size | |
| color.text.brand--smbk-color-text-brand | light: #cc0d0ddark: #f34336changes with theme | Color | |
| motion.feedback.duration--smbk-motion-feedback-duration | 150ms | Motion | |
| motion.feedback.easing--smbk-motion-feedback-easing | cubic-bezier(0.16, 1, 0.3, 1) | Motion | |
| motion.state.duration--smbk-motion-state-duration | 200ms | Motion | |
| motion.state.easing--smbk-motion-state-easing | cubic-bezier(0.65, 0, 0.35, 1) | Motion | |
| size.target.comfortable--smbk-size-target-comfortable | 44px | Size |
Manifest
{
"name": "segmented-control",
"block": "smbk-segmented",
"summary": "A row of named choices in one bar, one of which is selected, with the selected one raised.",
"adapt": "css",
"axes": {
"size": {
"values": [
"lg",
"md",
"sm"
],
"default": "lg"
},
"item-width": {
"values": [
"equal",
"hug"
],
"default": "equal",
"description": "Equal: every item as wide as the widest, so they share the bar equally, and fill it when the bar is given a width; Figma's items fill their bar this way. Hug: each item as wide as its words. Not in Figma, which draws equal only."
},
"content": {
"values": [
"label",
"icon",
"description"
],
"default": "label",
"description": "What each item shows. Label: its words, with an icon before them when it has one. Icon: its icon alone (or a short word, for a choice with no icon), its label still the choice's name and shown in a tooltip while pointed at or focused. Description: its label with a short line under it, the bar growing to hold it. Figma's segment item calls this Content: Label, Icon only, Label and description. One for the whole bar."
},
"look": {
"values": [
"standard",
"theme"
],
"default": "standard",
"description": "Standard: the bar as Figma's segmented control draws it. Theme: the theme switch's look, for a bar of icons alone: square items, each icon a step larger than the standard bar's at its size, and an icon hovered in the brand text color. The theme switch draws it."
}
},
"flags": {},
"parts": [
"indicator",
"item",
"icon",
"label",
"short",
"description"
],
"figmaNodeId": "4209:19853"
}