Primitives

Buttons

The full button family — primary (filled AA-safe green on light surfaces, outline neon on dark, per production), signal (glowing neon fill), secondary, ghost, destructive, link, and five tonal variants — across all sizes, icon slots, and interaction states.

Variants

All variants at the md size. Primary follows production's two-surface CTA system: a solid green fill on light surfaces, and an outline neon treatment on dark. Signal is the glowing neon fill production reserves for its highest-emphasis moments.

<Button variant="primary">primary</Button>

Sizes

sm / md / lg for labeled buttons, plus square icon-only sizes.

With icons

Leading and trailing icon slots.

Button group

A confirmation-dialog pattern — destructive on the far left, primary on the far right.

Full width

Buttons stretch to fill their container — common in modals and forms.

Loading state

Click the button — it swaps its label for a spinner for 1.5s while keeping its width stable, then returns to resting.

States

Resting, disabled, and loading side by side.