Button

Use cases

Primary call-to-action (variant="default") — one per region, the most important action.
Accent call-to-action (variant="accent") — branded emphasis that should not replace the primary action.
Destructive confirmation (variant="destructive") — delete, archive. Always pair with a confirm flow.
Secondary action alongside a primary (variant="outline" or variant="secondary").
Inline action without a strong border (variant="ghost").
Link-styled action within prose (variant="link").

For navigation that is purely a link with no side effect → use a <Link/> directly.
For toggle state → use a Toggle / Switch (planned).

Variant	Use when
`default`	The primary action in a context. One per region.
`accent`	Brand-accent emphasis for secondary CTAs.
`destructive`	Confirming a destructive action (delete, archive).
`outline`	Secondary alongside a primary.
`secondary`	Alternative when "outline" is too quiet for the brand context.
`ghost`	Tertiary, in toolbars, low-density rows.
`link`	Inline within prose, where a button would feel heavy.

Size	Height	Use when
`sm`	32px	Dense toolbars, secondary actions in tables.
`md`	40px	Default for most desktop UIs.
`lg`	44px	Mobile primary actions (44px touch-target rule).
`xl`	48px	Page-level primary actions and large modal footers.
`xxl`	56px	Prominent mobile actions and hero-size form submissions.
`icon`	44×44	Icon-only square. Always pair with `aria-label`.

Shape	Use when
`rounded`	Default button shape.
`hard`	Square edge for enterprise grids, toolbars, and edge-aligned action bars.

Pair with leadingIcon / trailingIcon (from @mihcm/icons) for affordance.
Use IconButton for icon-only actions. It fixes size="icon" and requires an accessible label.
For loading states, use isLoading — sets aria-busy and disables interaction.
For disabled states, use disabled directly. The visual treatment is the same as loading; aria-busy is the differentiator for assistive tech.
Buttons render semantic <button> elements on web and default to type="button". Use type="submit" only for the primary submit action in a real form, and type="reset" only for intentional reset behavior.