Button

The button, in seven variants — and with as="a" a link that looks like one. A variant carries the meaning of the action, not a colour, and in dark mode it holds a contrast that copied classes lose.

When to use it

Anything the user clicks. This is the button in this application.
The main action of the screen — variant="primary", top right, and exactly one. A second primary action next to the first means neither of them is the main one.
An action is running and that has to show — loading locks the button, sets aria-busy and covers the label with a spinner without the button shrinking.
An icon in a table row, where there is no space for a label — iconOnly plus an aria-label.
The action is irreversible: variant="danger". The meaning lives in the variant, not in a colour you picked.
The action navigates rather than starts something (sign-up, contact, docs) — as="a" with an href. It renders a link, so middle-click and “open in a new tab” work, and the look need not be copied.

When not to use it

It is a link inside a sentence. That is set as text, not as a button: as="a" gives a link the shape of a button, and that shape tears a line of prose apart.
You want a colour other than the one the variant gives. Colour here is not a choice but a meaning; a new need is a new variant, not a className.

Properties

as: "button" | "a" — Defaults to button. With "a" it renders a link — for an action that navigates rather than starts something.
href: string — Required with as="a", unavailable otherwise. A link with no target is not a link: it never enters the tab order.
variant: "primary" | "accent" | "ok" | "secondary" | "ghost" | "danger" | "inverse" — The weight of the action. Defaults to secondary — a primary action is asked for out loud, because there should be one per screen. inverse belongs on an inverted field (a dark block), where a neutral button is invisible.
size: "sm" | "md" | "lg" — Height 28 / 34 / 42 px. Defaults to md.
iconOnly: boolean — A square, icon-only button. Requires an aria-label.
loading: boolean — Covers the label with a spinner, locks the width and sets aria-busy. Buttons only — a link cannot be in progress.
leadingIcon: ReactNode — Icon before the label.
trailingIcon: ReactNode — Icon after the label.
disabled: boolean — Unavailable action. Careful: a greyed-out button does not say why.