Component
A reusable building block of the interface.
Definition
A reusable interface element with defined behaviour, states and an API.
Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.
On this plate
In plain language
A reusable building block of the interface.
Example
One button component with variants replaces five bespoke button styles.
Commonly confused with
Close neighbours that get substituted for each other. The difference is stated first, then the condition that picks one over the other.
Design Pattern
TermA recurring solution to a recurring problem, described rather than shipped.
Key difference
A component is a specific, reusable implementation. A pattern is the repeatable solution behind it, which may be built from several components and may be implemented differently in different places.
Use Component when
- The thing has props, variants and a place in the library.
- The question is what it renders and how it behaves.
- Two teams should be using exactly the same one.
Use Design Pattern when
- The answer is a way of doing something, not a single element.
- It composes several components, or none in particular.
- The guidance is about when and why, not about props.
Local chart
TERM·037 · Region X · Grid D5
This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.
Continue from here
Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.
Deeper reading
The full entry behind this definition.
- Component API DesignSYS·002 · Design system
- Design System DocumentationSYS·003 · Design system
- SimilarityFND·005 · UI foundation
Related concept
Connected closely enough to change how you apply this.
- Atomic DesignTERM·086 · Term
- User Interface (UI)TERM·002 · Term