Component variants

Learn how to create and use component variants.

Variants let you define different layouts, colors, font styles etc. (e.g., solid or outline buttons, or horizontal and vertical card layouts) for a main component. Then you can choose which which variant to use on each instance of your component across your site.

How to create component variants

To create a component style variant:

1. Edit the main component

2. In the Navigator, click the “plus” icon next to Variants

3. Click the “plus” icon

4. Give the variant a unique name

5. Press the Enter/Return key on your keyboard to confirm

You can also add component variants on the Component Canvas by clicking the on-canvas "+ Variant" button, or managing variants from the Style panel.

Edit variant styles

Styles edited in the base variant are shared across all variants but styles edited in other variants only apply to that variant. You can use conditionals to show, hide, and change content based on the current variant.

Manage the variant prop

When you create a component style variant, a variant prop is automatically created for that component. You can change the variant prop’s name, add it to a property group, and set a default variant for the component in the Properties panel.

Change the name of the variant prop

1. Edit the main component

2. Click the “Properties” icon in the left toolbar or press K on your keyboard to open the Properties panel

3. Click the Variant property

4. Enter a unique property name

5. Press the Return key on your keyboard to confirm

Add the variant prop to a property group

1. Edit the main component

2. Click the “Properties” icon in the left toolbar or press K on your keyboard to open the Properties panel

3. Click the Variant property

4. Select a group or enter a unique name to create a new group

5. Click Create or press the Return key on your keyboard to confirm

Learn more about component property groups.

Set a default variant for a component

The base variant will be used as the default variant on component instances. To select a different default:

1. Edit the main component

2. Click the “Properties” icon in the left toolbar or press K on your keyboard to open the Properties panel

3. Click the Variant property

4. Choose a variant from the Defaults dropdown

Change a component instance’s variant

Like other component properties, you can choose the style variant for each instance of a component. To change a component instance’s variant:

1. Select the component instance to open the Props panel

2. Choose the variant for this instance from the Variants dropdown

Reorder, rename, duplicate, or delete component style variants

Designers can manage component style variants (e.g., reorder, rename, duplicate, or delete variants).

To reorder a component’s variants:

1. Edit the main component

2. Open the Navigator

3. Click and drag a variant to move it to a new position

When you reorder component variants, their frames are automatically reordered on the Component Canvas also.

To rename a variant:

1. Edit the main component

2. Open the Navigator

3. Double-click the variant name

4. Enter a new, unique variant name

5. Press the Enter/Return key on your keyboard to confirm

To duplicate a variant:

1. Edit the main component

2. Open the Navigator

3. Hover over the variant and click the “more options” dots

4. Click Duplicate

5. Enter a unique variant name

6. Press the Enter/Return key on your keyboard to confirm

To delete a variant:

1. Edit the main component

2. Open the Navigator

3. Hover over the variant and click the “more options” dots

4. Click Delete

5. Click Delete in the pop-up modal to confirm

Note the base variant can't be deleted.