Button

Colour comes from the brand accent via the nearest data-brand scope, not a hardcoded value — switch brands below to see it re-theme live. Calm interaction: hover darkens, press nudges down 1px, never bouncy.

Props

Accessibility

• Renders a real <button> by default, so focus, keyboard activation (Space/Enter), and the disabled state come from the browser for free.
• asChild swaps the rendered element via Radix Slot (e.g. wrap a router Link for a button-styled navigation action) — the ARIA role and keyboard behaviour follow whatever element you pass in, so make sure it's a real interactive element.
• ghost and outline have no fill of their own — check contrast against whatever surface they sit on before shipping.

Do / Don't

• Do use primary for the one action you want someone to take on a screen; reserve secondary and ghost for everything else.
• Do use inverse on dark or photo backgrounds — never primary there, its fill may not read against the surface behind it.
• Don't stack more than one primary button in the same view — it stops meaning "the" action.