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 | ✅ | 📄 | 📄 |
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 | ✅ | 📄 | 📄 |
radio | ✅ | 📄 | 📄 |
radiogroup | ✅ | ||
rating | ✅ | 📄 | ❌ |
scrollbar | ✅ | ||
search | ✅ | 📄 | 📄 |
searchwithin | ✅ | 📄 | ❌ |
sidenav | ✅ | 📄 | 📄 |
slider | ✅ | 📄 | 📄 |
splitview | 📄 | 📄 | |
statuslight | ✅ | 📄 | 📄 |
steplist | ✅ | 📄 | ❌ |
stepper | 📄 | 📄 | |
stepperbutton | ✅ | ||
swatch | 📄 | 📄 | |
swatchgroup | 📄 | 📄 | |
switch | ✅ | 📄 | 📄 |
tabbar | ✅ | ||
table | ✅ | 📄 | 📄 |
tabs | ✅ | 📄 | 📄 |
tag | ✅ | 📄 | 📄 |
taggroup | ✅ | 📄 | ❌ |
textarea | ✅ | ||
textfield | ✅ | 📄 | 📄 |
thumbnail | ✅ | 📄 | 📄 |
toast | ✅ | 📄 | 📄 |
tooltip | ✅ | 📄 | 📄 |
tray | ✅ | 📄 | 📄 |
treeview | ✅ | 📄 | ❌ |
typography | 📄 | 📄 | |
underlay | 📄 | ||
well | ✅ | 📄 | ❌ |