17.4 Button

Purpose: trigger an action.

Variants:

primary
secondary
ghost
destructive
link-like

States:

default
hover
active
focus-visible
disabled
loading

Sizes:

sm
md
lg

Core rules:

• use semantic <button>
• preserve accessible name
• loading state should not cause layout shift
• icon-only buttons require labels
• focus state must remain visible
• disabled styling must not rely only on opacity

Example API:

<Button
  variant="primary"
  size="md"
  loading={isSaving}
>
  Save changes
</Button>