Using Variants effectively

Before we run off and create variants for everything, it’s important to understand when it makes sense to use variants and which situations to avoid. Not everything needs to be a variant and you can still use existing techniques alongside variants.

Use variants when:

• Multiple versions of similar components share the same properties such as state, size, count, layout, and more.
• Components can toggle between two distinct variations that could be represented as true/false, on/off, or yes/no.
• Component variants map to properties that align with your code components following the prop/value format used in popular frontend frameworks like React and Vue.

Avoid situations where:

• Adding variants creates an unmanageable number of permutations, consider nesting instances or using base components instead.
• Colors or themes might create an increasing number of variants and would need to be maintained across every component.

Nesting instances

Nesting instances is a powerful technique for composing complex designs and can be used alongside variants for more complex component sets.

Let's start with a button. You may have several properties like type (primary, secondary), state (active, hover), or whether the button has an icon or not.

You might be tempted to define a variant for every possible icon, but this quickly becomes unmanageable. It's better to use an instance of an icon and swap the nested instance as you would with traditional components.