Component versus pattern in a design system

WHAT THIS TESTS Whether you use design system terminology precisely, separating an atomic building block from a reusable approach to a recurring problem.

A GOOD ANSWER COVERS A component is a discrete, reusable unit of UI, usually shipped as code, with a defined API and states. Examples are a Button, an Input, an Avatar, or a Tooltip. A pattern is a documented, repeatable way of combining components and behaviors to solve a recurring design problem. Examples are a form-validation pattern, an empty-state pattern, or a search-filter-results pattern. Components answer what you build with; patterns answer how to assemble those parts and what UX rules apply. A pattern is often guidance and a recommended composition rather than a single importable file, though some patterns crystallize into higher-order components over time.

COMMON WRONG ANSWERS Using component and pattern as synonyms erases a useful distinction teams rely on. Claiming a pattern is just a larger component misses that patterns include behavior, sequencing, and guidance, not only markup. Saying every pattern must be coded ignores that many live as documentation.

LIKELY FOLLOW-UPS Can a pattern become a component? Yes, when a composition is common enough it gets packaged. Where do patterns live? Usually in documentation with do and don't examples. Why does the distinction matter? It keeps the component library focused while still guiding composition.

ONE CONCRETE EXAMPLE A Button and a TextInput are components, each a coded unit with props and states. A login pattern documents how to compose those components: layout, error placement, validation timing, focus order, and accessibility guidance. The pattern reuses the same components but adds the rules for combining them, which is knowledge the individual components cannot encode on their own. If many teams keep rebuilding the same login arrangement, the team may later package it as a higher-order component, at which point the pattern graduates into a shippable component while its guidance still lives in the documentation.