| Concept | Meaning | Button examples | Ask |
|---|---|---|---|
| Variant | A deliberate product role or emphasis choice. | Primary, secondary, tertiary, danger, ghost, text. | “What kind of action is this?” |
| State | A temporary condition caused by interaction, data, permission, or async work. | Hover, focus, pressed, disabled, loading, selected. | “What is happening right now?” |
| Size | A density/layout adaptation, not a new meaning. | Small, medium, large, icon-only. | “What context must this fit?” |
| Composition | How components combine into a larger pattern. | Button group, toolbar, form actions. | “What relationship do these actions have?” |
Smell test
If a variant name describes a one-off screen location, it is probably not a variant. If it describes product intent, it might be.
Bad variant names
dashboardBlue— location plus appearance.bigImportant— vague emphasis, unclear rule.marySpecial— owner/requester, not product meaning.