Skip to results

Design Component Variants

Design Systems & Tokens · components

Updated 2026-07-28

Variants should represent meaningful differences.
Good variants:

Primary.
Secondary.
Danger.
Ghost.

Bad variants:

Slightly different blue.
One special page version.
Custom spacing.

Every variant increases system complexity.
Add variants carefully.

Related guides