Build Assets
UI Component

Primary Button

Main call-to-action button for the single most important action on a surface.

Platform: bothTags: button, cta, interactive, form

Purpose

Triggers the primary action on a screen. One primary button per view — it signals the most important next step.

Anatomy

  • Container: full border-radius pill or moderate radius (4–8px)
  • Label: 14–16px medium weight, centered
  • Optional leading icon: 16–20px, 8px gap to label
  • Focus ring: 2px offset outline for keyboard navigation

States

  • Default: solid brand background, white/dark label
  • Hover: 10% darker background (use HSB brightness -10)
  • Active/Pressed: 20% darker background
  • Disabled: 40% opacity, no pointer events, no hover effect
  • Loading: spinner replaces content, same background

Tokens

spacing

paddingX: 16pxpaddingY: 10pxiconGap: 8px

sizing

height: 40pxminWidth: 80pxiconSize: 18px

Do

  • Use for the single most important action per view
  • Keep label to 1–3 words
  • Ensure 4.5:1 contrast ratio between label and background
  • Provide a visible focus state for keyboard users

Don't

  • Place two primary buttons in the same view
  • Use for destructive actions — use a danger variant
  • Disable without explaining why nearby
  • Use ALL CAPS unless the brand guideline requires it

Accessibility

  • Minimum touch target: 44×44px on mobile
  • Visible focus indicator (2px outline, 2px offset)
  • Use <button> element — never div or span with onClick
  • aria-label required when icon-only
  • aria-disabled="true" + visual disabled state when blocked

Code Example

<button class="btn-primary" type="submit">
  Save changes
</button>

Source Topic

design systems

Defining Pattern Structure

Documenting content hierarchy before visual design to align design and code