Variants

The Variants system is excellent for creating multiple iterations of the same component that behaves differently depending on the property values you have set.
For example, if you are building a design system, you may want a button to have multiple variants for your team or users to use.

In the example below, a button with color and variant (solid, outline, text) properties allows users to select a color and variant.

To create a variant, open the component configuration menu and select the plus button in the variant section.
It is best to name the variant familiar to make it easy to edit in the future.

When you add a rule for the variant, the first category is your property, the second is the condition, and the third is the property's value. In the image above, the variant severity = error rule set is "severity is equal to error" activate the variant.

📘

Note

The changes the you makes in this variant will be applied to the component only when the value for the property meets the condition, e.g. when the value for the property severity is the string error.

To change the style of the Button on that variant, set the severity property on the alert to error, and set the variant selector in the top toolbar to severity = error.

Now you can change the styling to fit the variant. In the example variant severtity = error the border color and the typography color are set to red.