Understanding components is critical when designing with a design system, and component variants and states are a part of that. Since variants and states are both visual variations of the same component, the difference between them can be hard to understand at first. Hopefully, this article helps!

Variants of a Component

When a similar component is designed to be used across different scenarios, each different design is a variant of that component.

Primary and secondary buttons are a great example of variants. Both variants might have similar sizes and fonts, but the primary button will be full color to draw the users eye to important CTAs and the secondary button will be gray and used for less important CTAs.

Another example of variants that we'll follow throughout this article is transit app cards for trains and subways. In this app, trains have a train card with a green icon, the train number, and a terminal. Subways have a subway card with a blue icon and the final destination station. Each of these variants communicate something different to the user about the situation, i.e. which type of transit is on the way.

Component States

If variants are situational, component states are reactive. When a component changes its appearance based on user interaction or app data, we say it has states.

In our transit card example, we have states to show favorited routes or if there's a delay.

States can change based on user interaction, which gives users feedback on their taps, scrolls, and other inputs. In the example, the favorited state occurs when a user long presses on the component.

States can also change based on external data, which relays important updates to users. In the example, the delayed state occurs when the app receives external information that the train is delayed.

States across Variants

States can, and should, exist across the different variants of a component. Users can favorite both subway and train routes. Both subway and train routes can be delayed. If a variant doesn't make sense in all states, then it shouldn't be a variant and should instead be a new component.

For example, walking routes cannot be delayed, so they should become a new component (Learn how to detach a component).