Reuse decisions, not rectangles
A component is valuable because it preserves a solved relationship. A button encodes target size, emphasis, states, content limits, and interaction—not merely a rounded background.
Figure 01
Component anatomy
The visible object contains structural, semantic, and behavioral layers.
Source
Proteus study
Define responsibility
Good components have clear boundaries. They know what changes through properties, what remains constant, and which responsibilities belong to the parent layout.
Visual breakdown
A useful component contract
A component API is a design document. Every option expands the system’s possible behavior.
- 01Name the semantic purpose.
- 02Define required and optional content.
- 03Specify states and transitions.
- 04Document layout responsibility.
States are part of the design
Default, hover, focus, active, disabled, loading, empty, and error conditions are not edge cases. They are the component’s actual life.
Exercise 01
Is this one component or three?
Reveal the observation +
If the objects share semantic purpose, structure, and behavior, they may be variants. If their responsibilities differ, shared styling does not make them one component.
Chapter summary
Keep these
ideas close.
- 01Components preserve solved relationships and behavior.
- 02Clear responsibility matters more than visual similarity.
- 03Every meaningful state belongs in the component definition.
Related topics
Keep exploring
References
Books
Designing Interfaces
Jenifer Tidwell et al. · A durable pattern language for interactive systems.
Atomic Design
Brad Frost · A model for composing interface systems.
Web & practice
Open UI
Research into interoperable component semantics.
Inclusive Components
Accessible behavior explained at component scale.
Field exercise
Choose one component and list every state it can enter before drawing its default appearance.