Buttons

Source: src/styles/parts/buttons.scs — and controls::button in src/styles/controls.scs for the same recipe inside a shadow root, listed on For elements.

A bare <button> is already the secondary style: most buttons in an application are secondary, and a page that never adds a class still looks deliberate. .primary is the one filled button a view should carry; .transparent is the toolbar button. Everything below is the same recipe with one class added.

The base

Tones

One filled recipe, six hues. The label is always the surface token — light on a light theme, dark on a dark one — so a filled button stays readable in both without a second palette.

Shapes

Sizes

States

Groups

Buttons glued into one control: hairlines never double, and only the ends of the group are rounded.

On another ground

Use the button on any specimen of this site to check it on the page ground and on ink. Inside .hero-cta a bordered button takes the ink ground's own hairline rather than the page's — see Marketing sections.