Patterns are solutions and researched best practices that solve recurring user interface design problems:
- How do you build complex, multi-part web forms?
- How do you provide navigational context?
- How do you handle progressive disclosure?
How are they different from components?
A pattern is more than the sum of its parts. Patterns are solutions, whereas a component can be considered a UI chunk. Patterns consist of design, content strategy, reusable components, and accessibility put together to solve common problems.
Components can be considered concrete, a finite list: buttons, accordions, tables, etc. Patterns might be unique to a site or an application and may evolve with changes in technology or after competitive analysis.