Button
The one way to trigger an action. Variants carry intent, not appearance — a call site selects one, it never restyles.
import from ~/components/ui/button
Variants
variant
Named by intent, never by appearance. `cta` is the one marketing-weight button.
Sizes
size
A closed set of four. `icon` is square and label-less.
With an icon
icon + label
Icons are sized by the component — never at the call site.
States
disabled
Disabled is contrast-exempt — it is the one pair not held to WCAG AA.
Rules
Do
Pick a variant by intent: primary action, secondary, destructive.
Exactly one `cta` or `default` button per view — the primary action.
Give an icon-only button an aria-label; the icon is not the name.
Layout classes at the call site are fine: mb-4, w-full, ml-auto.
Don't
Do not pass color, font or rounded classes — that means a variant is missing.
Do not name a variant for its appearance (`variant="purple"`).
Do not nest a button inside a link, or a link inside a button.
Do not disable a button without telling the user why.