Interface: Buttons

Rule

Buttons define action hierarchy. Treat them as deliberate system primitives, not one-off decorations.

Sizing

  • MUSTProvide at least three control heights across the system: compact, default, and prominent.
  • SHOULDUse min-h-11 or larger for primary actions on touch surfaces.
  • MUSTHit targets reach 44px minimum in both axes.
  • SHOULDUse horizontal padding that matches the control height (px-3 / px-4 / px-5), not oversized pill padding by default.
  • MUSTKeep button labels on one line unless the layout explicitly supports wrapped CTAs.

Hierarchy

  • MUSTOne primary button per view or action cluster.
  • MUSTSecondary actions read quieter than the primary through contrast, fill, and weight.
  • MUSTDestructive buttons use destructive semantics and a confirmation step when the action cannot be undone.
  • SHOULDTertiary actions use ghost or text treatments only when a stronger button would add visual noise.
  • MUST NOTPresent multiple visually primary buttons in the same cluster.

Typography

  • MUSTUse font-medium or font-semibold; avoid font-bold.
  • SHOULDKeep labels short and action-oriented.
  • MUSTUse tabular-nums when labels contain counts or changing numbers.

Focus And Interaction

  • MUSTVisible focus ring on every interactive button state.
  • MUSTPreserve contrast in hover, active, disabled, and loading states.
  • MUSTShow loading without shrinking or relabeling the button.
  • SHOULDUse precise transitions (transition-colors, transition-shadow, transition-transform) instead of transition-all.
  • MUSTGate hover-only affordances behind hover-capable input.

Shape And Surface

  • SHOULDKeep radius modest by default; large pill buttons need a product-level reason.
  • MUSTButton shadows, if any, be functional and subtle.
  • MUST NOTFake hierarchy with gradients when contrast and spacing should carry the structure.

Accessibility

  • MUSTIcon-only buttons have aria-label.
  • MUSTDisabled buttons still communicate why the action is unavailable when context requires it.
  • SHOULDPair destructive buttons with reinforcing copy, not color alone.

Review Questions

  • Is the primary action unmistakable?
  • Are adjacent buttons clearly ordered by importance?
  • Would the button still feel intentional in keyboard-only and touch-only use?