Skip to content
Design Academy My progress

Design systems · Intermediate · 1 h 30 min

Build reusable components

Turn a messy set of buttons and inputs into a small, documented component set with every state.

Context

An appointment booking app has seven slightly different buttons and four input styles, created by different people. Engineers keep asking which one to use.

Your prompt

Create one button component and one text input component, each with variants, sizes and all interactive states, plus short usage guidance.

Instructions

  1. Inventory: draw or screenshot every existing button and input style you can find in two or three apps you use.
  2. Decide the button variants you need (for example primary, secondary, tertiary, destructive) and two sizes.
  3. Design every state: default, hover, focus, pressed, disabled and loading for buttons; default, focus, filled, error, disabled for inputs.
  4. Build them as components with properties in your design tool (variant, size, state, with or without icon).
  5. Write usage rules: when to use each variant, and what not to do.
  6. Check focus and error states for contrast and colour independence.

Expected deliverables

  • A component sheet showing every variant and state
  • Usage guidance (one short paragraph per variant)

Completion checklist

5 items

Evaluation criteria

  • Fewer, more purposeful variants than the starting point.
  • Complete state coverage.
  • Guidance a new teammate could follow without asking you.

Hints and an illustrative solution

Show hints
  • A good test: can you explain the difference between two variants in one sentence? If not, merge them.
  • Loading buttons should keep their width so the layout does not jump.
Show one possible solution

This is one reasonable answer, not the only one. Compare reasoning, not pixels.

One reasonable set: Button with variants Primary (one per screen, the main action), Secondary (alternatives), Tertiary (low-emphasis text-style actions) and Destructive (irreversible actions, always with confirmation). Sizes Medium (44px) and Small (36px, desktop only). States: default, hover, focus (2px outline offset by 2px), pressed, disabled (with guidance to avoid disabled buttons when an explanation would be better) and loading (spinner replaces the label, width fixed).

Text input: label above, optional hint below the label, field, and an error message with an icon below the field. States: default, focus, filled, error, disabled, read-only.

Back to the practice library