ds
Components
Button

Button

Default, primary, accent, ghost and icon buttons in three sizes.

Variants

Code

<button class="btn">Default</button>
<button class="btn primary">Primary</button>
<button class="btn accent">Accent</button>
<button class="btn ghost">Ghost</button>
<button class="btn danger">Delete</button>

.primary is ink on paper and is fin1te.com's main action. .accent is purple and is topo's: one per screen, for the thing the screen is for (Present). Ghost buttons live in toolbars and next to a primary.

Sizes

Code

<button class="btn">Default</button>
<button class="btn sm">Small</button>
<button class="btn xs">Extra small</button>

Default is 2.375rem, .sm is 2rem (topo's panels), .xs is 1.75rem (inline actions in tables and captions).

With icons

Code

<button class="btn"><svg class="i" viewBox="0 0 24 24" aria-hidden="true">…</svg>Export</button>
<button class="btn icon" aria-label="Undo"><svg class="i" …>…</svg></button>
<button class="btn icon sm ghost" aria-label="Close"><svg class="i" …>…</svg></button>

States

Link, disabled

Code

<button class="btn" aria-pressed="true">Snap</button>   <!-- toggle, on -->
<button class="btn ghost on">Grid</button>             <!-- .on when there is no ARIA state -->
<button class="btn" disabled>Disabled</button>
<a class="btn" href="…" aria-disabled="true">Link, disabled</a>

Group

Code

<div class="btn-row">
  <button class="btn primary">Save</button>
  <button class="btn ghost">Cancel</button>
</div>

API

Class	On	What it does
`.btn`	button, a	Bordered button on --surface.
`.primary / .btn-primary`	.btn	Ink fill. The main action on fin1te.com.
`.accent`	.btn	Purple fill. The main action in topo.
`.ghost`	.btn	No border or fill until hover.
`.danger`	.btn	Red text for destructive actions.
`.sm / .xs`	.btn	2rem and 1.75rem heights.
`.icon`	.btn	Square, for a single icon. Needs aria-label.
`aria-pressed="true" / .on`	.btn	Toggled on: accent wash.
`.btn-row`	div	Wrapping row with 0.5rem gaps.

Accessibility

Use <button> for actions and <a> for navigation; both look the same.
Toggles set aria-pressed. Icon-only buttons set aria-label, and a tooltip if the icon is not obvious.
The focus ring is the global 2px accent outline. Do not remove it.

One primary or accent button per view.
Verbs: Save, Export, Present.

Don't

Two filled buttons side by side.
Disable a button without saying why nearby.