What is a UI Pattern?

TL;DR

• A UI pattern is a recurring solution to a recurring interface problem.
• Examples include pagination, search suggestions, inline validation, tabs, and confirmation flows.
• A pattern is broader than one component.
• Patterns should be adapted to product context rather than copied blindly.
• Design systems often document approved patterns alongside components and tokens.

What does a UI pattern mean?

Suppose users need to narrow a large table. The product might use a familiar filtering pattern: a filter control opens available criteria, active filters remain visible, and users can clear them without losing the underlying dataset.

The exact visual components may differ between products, but the interaction problem and solution structure recur.

That reusable solution is a UI pattern.

UI pattern vs. component

A component is a concrete reusable building block such as a button, input, or menu.

A pattern can combine several components into a larger solution. A search pattern may include an input, suggestions, keyboard navigation, loading behavior, no-results feedback, and recent searches.

Common UI patterns

• navigation and breadcrumbs
• search and autocomplete
• filtering and sorting
• progressive disclosure
• pagination and infinite scroll
• form validation
• confirmation and undo
• empty, loading, and error recovery

When should teams reuse a pattern?

Reuse is valuable when users benefit from familiarity and the underlying problem is genuinely similar.

Do not reuse a pattern only because another product looks successful. A mobile consumer app and a dense enterprise workflow can require different trade-offs even when the surface problem sounds similar.

How do teams evaluate a UI pattern?

1. Define the user problem the pattern should solve.
2. Review established conventions and existing product behavior.
3. Check whether the pattern fits the current information density and workflow.
4. Consider accessibility and responsive behavior.
5. Prototype unfamiliar adaptations.
6. Document approved usage in the design system.

Common mistakes

Copying screenshots instead of understanding behavior

The useful part of a pattern is the logic, not the pixels.

Inventing novelty where familiarity helps

Users should not relearn basic controls without a good reason.

Using one pattern for every context

Patterns are reusable, not universal.

The bottom line

A UI pattern asks: what recurring interaction problem has a proven solution structure we can adapt to this product context?

Related terms

Design system · Component · UI design · Interaction design

Relevant Figr resource

Read UX Design Principles for the principles that help teams choose and evaluate interface patterns.