Button

button, .slate-button. A link that opens a page and a button that runs a script are different elements doing the same job in a layout, so the tag and the class carry one declaration block and cannot drift. No type at all: font: inherit is @erikakers/typography's WCAG 1.4.12 rule, so an unclassed button in ordinary chrome reads at the document's size and one inside a paragraph reads at the paragraph's.

The parity group

Variants

secondary and ghost are alternatives to the filled default; small is orthogonal and composes with either.

Disabled

A dashed border, not a fade: opacity: 0.45 composited the control boundary to 1.67:1, under the 3:1 a control needs to be found at all. border-style: dashed survives greyscale, every colour vision deficiency and a forced-colours mode.

CSS cannot disable a link: aria-disabled stops a click, not the keyboard, so a link marked this way is still followed by Enter. An author reaching for it owes the link either no href or a prevented default: the styling alone is not a disable mechanism.

Keyboard interaction

• Tab reaches every enabled button and link in document order; a real disabled button is skipped.
• Enter or Space activates a <button>; Enter activates an <a>.
• The focus ring is slate-focus's and is not redrawn here: drawn on the page ground outside the button via outline-offset, so it stays visible against the accent fill.