One of several preset versions of the same component that share a purpose but differ in style — like a button's primary, secondary, and destructive versions.
Synonyms
Related terms
In plain words
- the different flavors of the same button
- preset versions of one component
Usage example
The alert component ships in four variants: info, success, warning, and error.
Don't confuse with…
- component stateA variant is a chosen style option; a state like hover or focus reflects how the user is interacting with it.
Categories
- Design systems