Components
Button
The cds button: a paint layer behind the label (v2: no press squish; hover, press and open menus stack translucent layers-* washes), six variants, five sizes on the control scale, pressed / busy / disabled-with-reason states, shortcuts, carets and indicators.
Variants
primary is the default (ink fill #191919 | #efefef; press adds the primary layer). secondary is a 5% | 15% fill with no ring or drop (disabled: fill-disabled); hover adds one fill-button-layer, press and an open menu two. ghost fills on hover (10% | 7.5%). danger and brand are solid. Labels are the control weight (435).
Sizes
xxs 20 · xs 24 · sm 28 · default 28 (touch 32) · lg 40 (compact density: 20 / 20 / 24 / 28). Padding = min(pad-md, button pad cap): 9 at sm / default, 8 at xs, 16 at lg; radius 8 at sm (7 + 1). Switch the density in the top bar.
Content
Leading / trailing icons pull in 4px, caret for menu triggers, a keycap shortcut after the label (or in the tooltip of icon-only buttons), a status indicator dot, flush alignment and the compact (icon-only) presentation.
States
Hover, keyboard focus (shadow-focus + a page-colour hairline inside the fill), an open menu trigger keeps its hover fill, pressed toggles get the accent tint (or the grey selected fill, 10% | 7.5%) and one more layer on hover, disabled keeps full opacity with the disabled ink (#0007 | #fff6) and fill, busy keeps width and focus.
Links and class-only use
href renders a NuxtLink with the same paint. buttonVariants() alone paints the root (same layers on the root itself) for components that only borrow the classes.