Variants

Variants allows to have different visualizations depending of the state of the component. Typically are used to implement states like Hover or Selected. Let's see the SelectableText component:

This kind of component will need to change when it is hovered or selected to let the user know the current state. In order to see or edit the variants, go to the Variants tab:

We see this component defines 2 custom variants along with the default one: hover and selected. The hover variant is automatic, when the component is hovered the hover variant will be rendered. However, we need to tell the component when the selected variant should be rendered as the selected state is not a standard state being dependant of the implementation. For that, we associate the state to a property, in this case the selected property so when this property resolves to true that component will be rendered using the selected variant.

When a component has custom variants, a variants dropdown will appear next to it:

If we change the variant to hover, we can preview this variant:

In the same way, if we change the variant to selected, we can preview it:

Any change in a variant will not affect other variants so we can create the variants independently. The values of any variant will inherit the default variant ones. For example these values appearing in the hover variant will be the same of the default variant:

However, if we change something there, the change will only apply to the hover variant without altering any other variant.

In the same way, if we change values in the default variant, they will be applied to the other variants automatically as long as the variant has not already overwritten them.