Variants

Variants are the predefined visual or behavioural variations of a component — primary, secondary, ghost; small, medium, large; default, success, danger — exposed as a single API rather than separate components. A button with three sizes and four intents has twelve variants but one component.

Variants are how a design system stays small as use cases grow. Done well, they cover real-world needs without bloating the library; done badly, they fork into "BigButton", "MarketingButton" and "LegacyButton" within a year. The discipline is to model variants as orthogonal axes (size × intent × state), each backed by design tokens, and resist adding a variant for every one-off request.

Related: Component · Component states · Component API · Design tokens