systems
Variant
A situational, design-time version of a component – primary vs secondary, small vs large – chosen deliberately, and unchanged while the app runs.
Before anyone touches a button, someone already decided: is this the important one on the screen (filled, high-contrast) or a lesser one (outlined, muted)? That decision was made at design time and doesn’t change while the interface runs. Variants are authored choices – the formulation that makes the pair stick: variants are situational, states are reactive.
The part that resolves most confusion: variants and states multiply, they don’t replace each other. A primary button can be hovered, pressed or disabled; so can a secondary button – the same states apply to every variant, producing a grid of appearances (three variants × four states = twelve looks for one component), not a single list. That cross-product, documented and built once, is precisely what a design system component is.