Every interactive component in each state it can be forced into from markup. Cells labelled hover and focus are live — point at them or tab into them; the ring cell paints the focus ring straight from the focus tokens so it is visible without a keyboard.

Button

6 variants. Before 0.6.0 only the base rule carried a focus ring, so 5 of these never ringed.

primary
hover / focus
ring
disabled
aria-disabled
secondary
hover / focus
ring
disabled
aria-disabled
destructive
hover / focus
ring
disabled
aria-disabled
outline
hover / focus
ring
disabled
aria-disabled
ghost
hover / focus
ring
disabled
aria-disabled
link
hover / focus
ring
disabled
aria-disabled

Button sizes

sm
default
lg
icon-sm
icon
icon-lg

Input

default
placeholder
ring
aria-invalid
disabled
readonly
size sm
size default
size lg

Textarea, select, label

textarea
textarea invalid
textarea disabled
select
select invalid
select disabled
label
label required

Checkbox, radio, switch

Marks are images, not glyphs — see the marks specimen.

unchecked
checked
indeterminate
ring
invalid
disabled
checked disabled
radio
radio checked
radio ring
radio disabled
switch off
switch on
switch ring
switch disabled

Badge

Default default
Secondary secondary
Destructive destructive
Outline outline
Success success
Warning warning
Focused ring

Toggle group

single, one item on
outline variant

Pagination

Menu items

Rendered outside their popovers so the item states are visible at rest.

Edit Delete Archive
dropdown item
Apple
Banana
Cherry
combobox option

Sidebar menu parts

Badge and action pin inside the menu item; the item with an action reserves the button's right padding.

plain button
with badge
with action
Projects
group action
separator

Table row

Invoice State
INV001 default
INV002 selected