Availability of Spectrum components in Spectrum CSS and Spectrum Web Components.
| Component | Design tokens (86) | CSS (76) | Web Components (59) |
|---|---|---|---|
| accordion | ✅ | 📄 | 📄 |
| actionbar | ✅ | 📄 | 📄 |
| actionbutton | ✅ | 📄 | 📄 |
| actiongroup | ✅ | 📄 | 📄 |
| actionmenu | 📄 | 📄 | |
| alertbanner | ✅ | ||
| artboard | ✅ | ||
| asset | ✅ | 📄 | 📄 |
| assetcard | 📄 | ❌ | |
| assetlist | ✅ | 📄 | ❌ |
| avatar | ✅ | 📄 | 📄 |
| badge | ✅ | 📄 | 📄 |
| banner | 📄 | ||
| body | ✅ | ||
| bottomnavigation | ✅ | ||
| breadcrumb | ✅ | 📄 | ❌ |
| button | ✅ | 📄 | 📄 |
| buttongroup | ✅ | 📄 | 📄 |
| calendar | ✅ | 📄 | ❌ |
| card | ✅ | 📄 | 📄 |
| checkbox | ✅ | 📄 | 📄 |
| clearbutton | ✅ | 📄 | 📄 |
| closebutton | ✅ | 📄 | 📄 |
| coachmark | ✅ | 📄 | 📄 |
| code | ✅ | ||
| colorarea | ✅ | 📄 | 📄 |
| colorhandle | ✅ | 📄 | 📄 |
| colorloupe | ✅ | 📄 | 📄 |
| colorslider | ✅ | 📄 | 📄 |
| colorwheel | ✅ | 📄 | 📄 |
| combobox | ✅ | ||
| cyclebutton | ✅ | 📄 | ❌ |
| detail | ✅ | ||
| dial | ✅ | 📄 | ❌ |
| dialog | ✅ | 📄 | 📄 |
| divider | ✅ | 📄 | 📄 |
| drag | ✅ | ||
| dragbar | ✅ | ||
| dragthumb | ✅ | ||
| drawer | ✅ | ||
| dropindicator | ✅ | 📄 | ❌ |
| dropzone | ✅ | 📄 | 📄 |
| fieldgroup | 📄 | 📄 | |
| fieldlabel | ✅ | 📄 | 📄 |
| heading | ✅ | ||
| helptext | ✅ | 📄 | 📄 |
| icon | 📄 | ||
| illustratedmessage | ✅ | 📄 | 📄 |
| infieldbutton | ✅ | 📄 | ❌ |
| inlinealert | ✅ | 📄 | ❌ |
| inputgroup | 📄 | ❌ | |
| label | ✅ | ||
| link | ✅ | 📄 | 📄 |
| listitem | ✅ | ||
| logicbutton | ✅ | 📄 | ❌ |
| menu | 📄 | 📄 | |
| meter | ✅ | ||
| miller | 📄 | ❌ | |
| millercolumn | ✅ | ||
| modal | 📄 | 📄 | |
| opacitycheckerboard | ✅ | ||
| page | 📄 | ❌ | |
| pagination | ✅ | 📄 | ❌ |
| panel | ✅ | ||
| picker | ✅ | 📄 | 📄 |
| pickerbutton | ✅ | 📄 | 📄 |
| popover | ✅ | 📄 | 📄 |
| progressbar | ✅ | 📄 | 📄 |
| progresscircle | ✅ | 📄 | 📄 |
| quickaction | 📄 | 📄 | |
| quickactions | ✅ | ||
| radio | ✅ | 📄 | 📄 |
| radiogroup | ✅ | ||
| rating | ✅ | 📄 | ❌ |
| scrollbar | ✅ | ||
| search | ✅ | 📄 | 📄 |
| searchwithin | ✅ | 📄 | ❌ |
| sidenav | ✅ | 📄 | 📄 |
| slider | ✅ | 📄 | 📄 |
| splitbutton | ✅ | 📄 | 📄 |
| splitview | 📄 | 📄 | |
| statuslight | ✅ | 📄 | 📄 |
| steplist | ✅ | 📄 | ❌ |
| stepper | 📄 | 📄 | |
| stepperbutton | ✅ | ||
| swatch | 📄 | 📄 | |
| swatchgroup | 📄 | 📄 | |
| switch | ✅ | 📄 | 📄 |
| tabbar | ✅ | ||
| table | ✅ | 📄 | 📄 |
| tabs | ✅ | 📄 | 📄 |
| tag | ✅ | 📄 | 📄 |
| taggroup | ✅ | 📄 | ❌ |
| textarea | ✅ | ||
| textfield | ✅ | 📄 | 📄 |
| thumbnail | ✅ | 📄 | 📄 |
| toast | ✅ | 📄 | 📄 |
| tooltip | ✅ | 📄 | 📄 |
| tray | ✅ | 📄 | 📄 |
| treeview | ✅ | 📄 | ❌ |
| typography | 📄 | 📄 | |
| underlay | 📄 | ||
| well | ✅ | 📄 | ❌ |