Design Component Variants Carefully
Design Systems & Tokens · components
Updated 2026-07-28
- Variants should solve real differences, not create unlimited choices.
- Avoid:
- Button A.
- Button B.
- Button C.
- Twenty slightly different versions.
- Create variants based on purpose:
- Primary.
- Secondary.
- Destructive.
- Ghost.
- Keep the system predictable:
- Same action type.
- Same visual language.
- Too many variants create inconsistency and slow teams down.
- A strong system creates enough flexibility without creating chaos.
- Every variant creates future maintenance cost.
- Before creating a new version ask:
- Is the purpose different?
- Is the behavior different?
- Is the content different?
- Slightly different buttons.
- One-off cards.
- Custom exceptions.
- Prefer:
- Fewer powerful components.
- Clear rules.
- Shared patterns.
- More options do not always create more flexibility.
Related guides
UX Handbook