Overview

A pattern is a recommended way to solve a recurring product problem by combining components — so the same job looks and behaves consistently wherever it shows up. It's bigger than any one component: it describes the shape of the solution, which the design system may package as a component, or which you may compose by hand.

Reach for the Components section when you need a single building block (a Button, a Select). Reach for Patterns when you need a solved case built from several of them.

Patterns and components

A pattern and a component aren't opposites — a component can be an instance of a pattern. The design system often ships a ready-made component for a pattern's most common case, and leaves the rest to hand-composition:

• Use the packaged component when one fits. For example, DataTable.Pagination implements the Pagination pattern for tables.
• Compose the pattern yourself when nothing packaged fits — say, paginating something that isn't a table. Each pattern page documents the composition and includes a live example with its full source to lift into your app.

Either way the pattern is the same; only the instance differs.

Patterns

• Copy button — an icon button that copies a value and confirms the copy in its tooltip.
• Loading — a screen that renders what it knows, loads slow parts on their own, and holds skeletons shaped like the finished UI.
• Pagination — a list footer that summarizes the current range and moves between pages.