# 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:

![](/files/kdSwPT145z6lFklkBRE6)

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:

![](/files/F6LdXjZDd36SPBj9hzZc)

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:

![](/files/BH2GbM1zyOxTPMR1oMWd)

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

![](/files/7KNtWyycu5IqPozd62R6)

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

![](/files/oX09824MosS9kKp6gYc4)

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:

![](/files/9eGj3WOkioPydunJFYf2)

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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.pickzen.com/design-system/variants.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.