Components
Status, guidance, tokens and code of every component. Their look changes through their tokens.
- 46 components
- 8 families
- 46 stable
- 0 beta
- 0 deprecated
- 44 with guidance
| Component | Status | Family | Guidance | Tokens | Props | Stories | Links |
|---|---|---|---|---|---|---|---|
| Icon | Stable | Foundations | Missing | 5 | 3 | 0 | Edit tokens Code |
| Button | Stable | Actions | Yes | 39 | 7 | 9 | Edit tokens Code Workbench |
| ButtonGroup | Stable | Actions | Yes | 2 | 3 | 3 | Edit tokens Code Workbench |
| IconButton | Stable | Actions | Yes | 1 | 5 | 4 | Edit tokens Code Workbench |
| Link | Stable | Actions | Yes | 12 | 3 | 4 | Edit tokens Code Workbench |
| Checkbox | Stable | Forms | Yes | 32 | 15 | 6 | Edit tokens Code Workbench |
| CheckboxGroup | Stable | Forms | Yes | 19 | 13 | 4 | Edit tokens Code Workbench |
| Combobox | Stable | Forms | Yes | 51 | 21 | 8 | Edit tokens Code Workbench |
| Field | Stable | Forms | Yes | 16 | 10 | 5 | Edit tokens Code Workbench |
| Form | Stable | Forms | Yes | 23 | 6 | 3 | Edit tokens Code Workbench |
| Input | Stable | Forms | Yes | 26 | 8 | 6 | Edit tokens Code Workbench |
| NumberField | Stable | Forms | Yes | 26 | 22 | 4 | Edit tokens Code Workbench |
| RadioGroup | Stable | Forms | Yes | 39 | 14 | 4 | Edit tokens Code Workbench |
| Select | Stable | Forms | Yes | 44 | 16 | 6 | Edit tokens Code Workbench |
| Slider | Stable | Forms | Yes | 22 | 18 | 4 | Edit tokens Code Workbench |
| Switch | Stable | Forms | Yes | 31 | 14 | 5 | Edit tokens Code Workbench |
| Textarea | Stable | Forms | Yes | 25 | 9 | 5 | Edit tokens Code Workbench |
| Alert | Stable | Feedback | Yes | 26 | 7 | 6 | Edit tokens Code Workbench |
| EmptyState | Stable | Feedback | Yes | 30 | 7 | 3 | Edit tokens Code Workbench |
| Progress | Stable | Feedback | Yes | 24 | 10 | 4 | Edit tokens Code Workbench |
| Skeleton | Stable | Feedback | Yes | 9 | 5 | 4 | Edit tokens Code Workbench |
| Spinner | Stable | Feedback | Yes | 6 | 3 | 2 | Edit tokens Code Workbench |
| Toast | Stable | Feedback | Yes | 31 | 8 | 3 | Edit tokens Code Workbench |
| AlertDialog | Stable | Overlays | Yes | 3 | 4 | 4 | Edit tokens Code Workbench |
| Dialog | Stable | Overlays | Yes | 33 | 5 | 4 | Edit tokens Code Workbench |
| Drawer | Stable | Overlays | Yes | 36 | 6 | 4 | Edit tokens Code Workbench |
| Menu | Stable | Overlays | Yes | 35 | 5 | 5 | Edit tokens Code Workbench |
| Popover | Stable | Overlays | Yes | 21 | 5 | 3 | Edit tokens Code Workbench |
| Tooltip | Stable | Overlays | Yes | 17 | 10 | 3 | Edit tokens Code Workbench |
| Breadcrumb | Stable | Navigation | Yes | 17 | 2 | 4 | Edit tokens Code Workbench |
| Pagination | Stable | Navigation | Yes | 20 | 7 | 4 | Edit tokens Code Workbench |
| SidebarNav | Stable | Navigation | Yes | 31 | 1 | 2 | Edit tokens Code Workbench |
| Tabs | Stable | Navigation | Yes | 35 | 7 | 4 | Edit tokens Code Workbench |
| Accordion | Stable | Data display | Yes | 26 | 9 | 4 | Edit tokens Code Workbench |
| Avatar | Stable | Data display | Yes | 16 | 4 | 5 | Edit tokens Code Workbench |
| Badge | Stable | Data display | Yes | 39 | 5 | 4 | Edit tokens Code Workbench |
| Card | Stable | Data display | Yes | 25 | 2 | 3 | Edit tokens Code Workbench |
| Divider | Stable | Data display | Yes | 11 | 3 | 3 | Edit tokens Code Workbench |
| Kbd | Stable | Data display | Yes | 16 | 2 | 3 | Edit tokens Code Workbench |
| Table | Stable | Data display | Yes | 34 | 4 | 4 | Edit tokens Code Workbench |
| Tag | Stable | Data display | Yes | 28 | 10 | 5 | Edit tokens Code Workbench |
| Container | Stable | Layout | Yes | 7 | 3 | 2 | Edit tokens Code Workbench |
| Grid | Stable | Layout | Yes | 1 | 4 | 2 | Edit tokens Code Workbench |
| Inline | Stable | Layout | Yes | 1 | 5 | 2 | Edit tokens Code Workbench |
| Stack | Stable | Layout | Yes | 1 | 4 | 2 | Edit tokens Code Workbench |
No Figma links yet: component docs do not record a Figma node. Push and pull of variables goes through the DS Bridge plugin, see Integrations.