Components

Buttons

One base class plus a variant. Works on <button>, <a> and <input type="submit"> alike.

Variants

_78-btn is the base. Add one variant for emphasis — there is no rule against using several buttons together, but only one of them should be _78-btn-primary.

button variants

<button class="_78-btn _78-btn-primary" type="button">Primary</button>
<button class="_78-btn" type="button">Default</button>
<button class="_78-btn _78-btn-ghost" type="button">Ghost</button>
<button class="_78-btn _78-btn-danger" type="button">Danger</button>

Class	Use for
`_78-btn`	The base. Required on every button.
`_78-btn-primary`	The one action you want taken. Filled with `--accent`.
`_78-btn-ghost`	A quieter action — no border until hover.
`_78-btn-danger`	Destructive actions. Outlined until hover, then filled.

Size and width

_78-btn-sm uses --control-h-sm instead of --control-h. _78-btn-full makes a button fill its container, which is what you want in a narrow form or a card footer.

small buttons

<button class="_78-btn _78-btn-primary _78-btn-sm" type="button">Small primary</button>
<button class="_78-btn _78-btn-sm" type="button">Small</button>

full-width button

<button class="_78-btn _78-btn-primary _78-btn-full">Full width</button>

Groups

_78-btn-group is an inline flex row with the right gap and wrapping already set, so a row of buttons does not need its own layout CSS.

button group

<div class="_78-btn-group">
  <button class="_78-btn _78-btn-primary" type="button">Save</button>
  <button class="_78-btn" type="button">Save and add another</button>
  <button class="_78-btn _78-btn-ghost" type="button">Cancel</button>
</div>

Disabled

Two ways, and they are not interchangeable. disabled is the right default: the control is inert and removed from the tab order. aria-disabled="true" keeps the button focusable and announced while looking disabled — use it when the user needs to be able to reach the control to find out why it is unavailable, and handle the click yourself by ignoring it.

disabled buttons

<button class="_78-btn" type="button" disabled>disabled</button>
<button class="_78-btn" type="button" aria-disabled="true">aria-disabled="true"</button>

A button with aria-disabled still fires click events — that is the point of it. Guard the handler, or the user will trigger an action you meant to block.

Icon buttons

_78-icon-btn is a square control sized by --icon-btn-size, for an icon with no label. It always needs an aria-label — there is no text for a screen reader to fall back on. The theme toggle in the topbar is one of these.

icon buttons

<button class="_78-icon-btn" type="button" aria-label="Settings">
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">…</svg>
</button>

← Overview Cards →