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:
Avoid situations where:
Multiple brand themes or colors will create a lot of permutations and could be difficult to maintain across all your components. We hope to tackle this head-on in the future.
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.