Practice Challenges

Primary Action States

Designers often create buttons for standard pages but forget to document interactive states (e.g. hover, keyboard focus, loading), causing developers to use browser defaults.

Select a Challenge Brief (5)

“

A registration button gets double-submitted because the UI doesn't show a disabled or loading state on click.

Beginner— A foundational component layout task covering color variations, border states, and focus outlines.

Context & Background

Designers often create buttons for standard pages but forget to document interactive states (e.g. hover, keyboard focus, loading), causing developers to use browser defaults.

Target Users

Product developers who require clear, documented button tokens to write clean, accessible CSS.

Inspiration & Benchmarks

Stripe Primer— Masterclass in button tokens and accessibility outlines.
Material Design— Excellent elevated ripples and ink states.

Your Task

Design a button component sheet displaying all 6 primary states: Default, Hover, Focus (with outline), Active (pressed), Disabled, and Loading (with spinner).

Hard Constraints

  • Must design states for a dark theme and light theme
  • Focus state outline must meet WCAG 3:1 contrast against background
  • Loading state must maintain the button bounding box (no text shifting)

Concepts This Tests

Affordances & SignifiersFocus Visibility (WCAG 2.4.7)

Evaluate Yourself

0/4 completed (0%)