Components
Cell
A row of a list: the options of Selectbox and the items of a Dropdown. It holds text with optional icons, avatar, badges and a checkbox or radio.
Playground
Istanbul
Figma variant
🎛 Type=Default
👕 Size=Medium
🕹 State=Default
Selected=False
Icon (L)=False
Icon (R)=False
Avatar=False
Badge (L)=False
Badge (R)=False
Bodycopy=False
Inline Badge=False
Subtitle=FalseTypes
Default is a text row; a selected Default row shows a check. Multi Text adds bodycopy, an inline badge and a subtitle. Checkbox and Radio draw the control before the text. Destructive is red. Action holds small ghost buttons and Search holds a search input.
Default
Default selected
Multi TextBodycopyNewSubtitle
Avatar and badgeAdmin
Checkbox
Radio
Destructive
States
Hover is surface/level-2. Selected is primary soft with primary text, and surface/level-3 on hover. Destructive uses error soft, tint and natural.
Hover
Selected
Selected hover
Destructive hover
Destructive selected
Sizes
Medium
Small
| Size | Height | Padding | Radius | Text | Icon | Avatar / Badge |
|---|---|---|---|---|---|---|
| medium | 40px | --space-tiny --space-medium | --radius-form-element | ui/text/regular | 20px | Tiny |
| small | 32px | --space-micro --space-small | --radius-form-element-small | ui/text small/regular | 16px | Micro |
Cell Helper
Captions and dividers that group cells: Caption, Caption + Divider, Divider and Caption No Padding.
Caption
Cell
Caption + Divider
Cell
Cell
Tokens
| State | Background | Text |
|---|---|---|
| default | transparent | --color-foreground-high-emphasis |
| hover | --color-surface-level-2 | --color-foreground-high-emphasis |
| selected | --color-primary-soft | --color-primary |
| selected hover | --color-surface-level-3 | --color-primary |
| destructive | transparent / --color-error-soft (hover) | --color-error |
| destructive selected | --color-error-tint / --color-error-natural (hover) | --color-error |
Notes from Figma
- Small Default Hover has a 10px gap, the other cells 12px; code uses 12px.
- Small Checkbox and Radio pad the text with layout-micro, the other Small cells with s-micro; both are 4px.
- Figma has no disabled cell; code greys out options with aria-disabled.
- The checkbox and radio are drawn by the cell (the cell is the option); they look like the Checkbox and Radio components.
- Image cells (.Cell Image, 2145:13023) are a Default cell with an avatar; there is no separate component.
Figma to code
| Figma | React |
|---|---|
| 🎛 Type = Default / Multi Text | <Cell> (+ bodycopy, inlineBadge, subtitle) |
| 🎛 Type = Checkbox / Radio | control='checkbox' / 'radio' |
| 🎛 Type = Destructive | tone='destructive' |
| 🎛 Type = Action | <CellActions> |
| 🎛 Type = Search | <CellSearch><Input type="search" size="small" /></CellSearch> |
| 👕 Size = Medium / Small | size='medium' / 'small' |
| Selected = True | selected |
| Cell Helper / Type | <CellHelper variant='caption' | 'caption-divider' | 'divider' | 'caption-flush'> |