A version of a component that shares its core design but differs in a specific way — such as a button that comes in primary, secondary, disabled and hover states. Variants are grouped together so people can swap between them easily.
Synonyms
- component variant
- variation
Related terms
- component
- state
- master component
- component library
- property
In plain words
- different versions of the same component, like the on and off buttons
- the styles and states a component can switch between
Usage example
The button component had four variants: default, hover, pressed and disabled.
Don't confuse with…
- stateA state describes how a component looks in response to interaction (hover, focused); a variant is any grouped alternative, which may include states plus things like size or emphasis.
Categories
- Design systems