Button

Four variants for actions: primary (action-bg), outline (stroke-ink in border-strong), quiet (stroke-hairline in border-default, no fill) and link (underlined action-bg text).

Primary, outline, quiet, link

Light

Graphite

Story: /stories/button/variants/

Guidelines

One primary button per view. Outline for the secondary action next to it; link for tertiary.
Quiet for the small action that repeats on every row of a list (the playground’s Copy and Download next to each output file), so a column of them does not outweigh the content. Its border turns border-strong on hover.
At least 48px tall (44px is the minimum on touch), radius-md, the label text style.
Focus is a stroke-focus ring in action-subtle, never only a colour change.
Labels are verbs or verb phrases: “See a review”, not “Click here”.
With an href it renders a link, otherwise a <button>.
In a Preact island (the playground): the styles live in Button.css, so island components render the same button with the class dta-button plus the variant (primary, outline, quiet, link) instead of re-styling their own. Token input, Source bar, Output options, Output files, Copy button and CLI hand-off do; a compact row may lower the height to the 44 px touch minimum.

Tokens used

Read from the component’s source:

--action-bg--action-fg--action-subtle--border-default--border-strong--fg-default--font-sans--radius-md--space-2--stroke-focus--stroke-hairline--stroke-ink--type-label-line-height--type-label-size--type-label-weight