Button

The only button on the site. A link when it has an href, otherwise a <button>.

<ul style="--color-button-fill: var(--color-accent-main)">
  <Button href="mailto:…">Email me</Button>
  <Button href={site.cvUrl} variant="ghost" external>CV</Button>
</ul>

Variants

• primary: black pill with cream text. One per group, for the main action.
• ghost: no pill until hover, same padding, so a column of buttons stays aligned.

Behaviour

• Arrow ↗: added automatically for external and mailto: links (force it with arrow). icon="play" shows ▶ instead, for media that opens on the page (e.g. a video in the lightbox).
• Hover and focus: a cream fill wipes up from the bottom and the label turns black in step with it; the arrow nudges up and right (▶ only right). No stroke.
• On a cream page the cream fill would vanish: set --color-button-fill on a parent (Contact and these examples use --color-accent-main).
• Size is site-wide: 16 with 8/16 padding up to 1439, 22 with 16/24 from 1440. Don't size buttons per page.

Props

Tokens