Components

Button

The one shared button, in src/components/button.tsx. Give it href and it renders a link; otherwise a <button>. For a link styled as a button elsewhere, use buttonClasses().

import { Button } from "@/components/button";

<Button variant="brand" size="lg" href="/demo">Book a demo</Button>
<Button variant="soft" size="lg">See pricing</Button>

Variants

Pick by the surface it sits on and how much it should stand out.

variant	When to use it	Example
`ghost`	Text-only, for use on dark surfaces (nav links).
`outline`	White outline, for use on dark surfaces (header over the home hero).
`plain`	Text-only, for use on light surfaces (nav links).
`secondary`	White with a muted border, for use on light surfaces.
`soft`	Soft grey fill, no border — header actions and secondary CTAs on light surfaces.
`brand`	Brand yellow — primary call to action.
`dark`	Dark fill — secondary CTA on light surfaces.
`inverse`	Plain white, for use over photos.

Sizes

size	When to use it	Example
`md`	—
`lg`	—
`xl`	—
`icon`	Square, for a lone icon (32px).
`icon-xl`	Square, for a lone icon (44px).

Shape and width

shape	When to use it	Example
`round`	—
`square`	—

width	When to use it
`hug`	Sized to its label; content centred.
`fill`	Fills its container; label left, trailing icon right.
`full`	Fills its container; content centred.

With an icon

Put an Icon after the label for direction (arrows) or before it for meaning.

<Button variant="dark" size="lg">Get started <Icon name="arrow-right" /></Button>

Busy

While an action runs, busy swaps the label for a spinner and keeps the width, so nothing jumps.

<Button variant="brand" size="lg" busy>Send</Button>

Guidelines

Do:One brand button per view: it's the main action.
Do:Write labels as the action: “Book a demo”, not “Submit”.
Do:Give icon-only buttons an aria-label.
Don't:Don't restyle a button with className colours. Add a variant instead.

<Button size="icon" aria-label="Next"><Icon name="arrow-right" /></Button>