ANVIL · ButtonSpec
| Min height (touch) | 44px (--sp-touch) |
|---|---|
| Padding sm | 8px 16px (0.5rem 1rem) |
| Padding md | 12px 24px (0.75rem 1.5rem) |
| Padding lg | 16px 32px (1rem 2rem) |
| Focus | 3px focus border; secondary uses light border for contrast |
| Accessibility | Use native button, visible focus, disabled via disabled attribute, icon-only with aria-label |
Primary
Size sm · md · lg — default · hover · focus · disabled
Secondary
Size sm · md · lg — default · hover · focus · disabled
Outline
Size sm · md · lg — default · hover · focus · disabled
Ghost
Size sm · md · lg — default · hover · focus · disabled
Buttons with icons
Use .anvil-btn__icon. Icon/text spacing is gap: var(--sp-2) (8px). Icon-only uses .anvil-btn--icon + aria-label.
Leading icon · sm / md / lg
Trailing icon
Icon only · always 44px touch target