Module 8 / Component craft
Component systems: core controls
Turns the UI component guide into reusable production thinking for buttons, forms, filters, search, navigation, modals, and sign-up flows.
Learning outcomes
- Design components with states, labels, constraints, variants, and accessibility expectations.
- Build forms and search flows that support input, recovery, filtering, and reset behavior.
- Document component behavior well enough for reuse and implementation.
Lessons
Buttons and action hierarchy
Buttons need clear labels, priority, size, spacing, affordance, and states for default, hover, focus, active, loading, disabled, and success.
Practice: Create a button set with primary, secondary, destructive, loading, and disabled variants.
Forms and validation
Forms must preserve labels, guide input, show useful errors, and recover gracefully when users make mistakes.
Practice: Design a sign-up form with empty, focus, error, loading, and success states.
Filters, search, and result feedback
Search and filters need visible query state, result count, empty state, reset behavior, and clear active filters.
Practice: Design a product filter panel and empty-state recovery for a catalog page.
Navigation and modal behavior
Navigation shows location and path. Modals interrupt intentionally and need clear focus, escape, and one decision.
Practice: Create a navbar and modal specification with responsive and keyboard notes.
Studio assignment
Component board with variants, states, usage notes, and implementation annotations.
Build a component board for a training enrollment flow: navigation, CTA, form, search, filter, modal, and sign-up states.