Component variant
A component variant is a defined form of a shared building block. It differs from a temporary interaction state.
Define differences within one component
A component variant is a deliberately defined form of the same UI component. It may differ by meaning, size or use. Each design system decides which differences constitute variants.
In a simplified example, a button has a primary variant for the main action and a more restrained variant for a secondary action. Both share fundamental rules. Having keyboard focus or processing a request, by contrast, describes a temporary state.
A design tool may represent variants and states in similar technical ways; the conceptual distinction remains useful. A variant is also not an independently copied component. Copies may miss shared updates. New variants should arise from an actual recurring need so the component remains understandable.
Sources
Related terms
- UI componentA UI component is a reusable part of a user interface. Its purpose determines the presentation and interaction behaviour it needs.
- Design systemA design system combines design rules, reusable components and usage guidance. It also needs maintenance and traceable changes.
- Design handoffA design handoff passes a design on for implementation. States, behaviour and outstanding decisions need to be clear.
- Component libraryA component library brings together reusable interface elements. Behaviour, variants and the right version also matter when using them.
- Design tokenA design token stores a named design decision. Multiple components can use it, allowing a value to be changed in a defined place.
Articles on this topic
Your project with ASES
Describe your project to us. We will get back to you with an initial assessment.