Adding Color Variants to a Component

Components often come in multiple color options. For example, a button might be available in black, white, and brown. Instead of creating separate components for each color, you can simply add multiple color variants to a single component.

1. Go to the Component Library and select the appropriate category.
2. Find the component you want to update with new colors, click on the component to open the side panel.

Navigate to the Colors tab.

**Adding Single Color Variants **

You will have two options here ‘ + Existing Group ' or ‘ + New Color Variant ’

To add a single colour click ‘ + New color variant ’

Adding a color variant from your Color Library;

1. Click the dropdown.
2. Select the desired color.

Click Add Color Group.

To add additional colors, repeat the above steps.

The color variant has now been added to the component!

Adding a new Color Variant not in the Color Library

1. Click ‘ + New color variant ’
2. Click ‘ + Create New Color ’

1. Enter the new Color Name.
2. Add Pantone information (optional).
3. Click ‘ Add Color ’. This will automatically save the new color to the main color library.

1. You’ll now see the color added.
2. Click ‘ Add Color Group ’ to associate the new color with the component.

Your new color has now been successfully added to both the component and the main color library.

To add additional colors, repeat the above steps.

The single color variants have now been added to the component.

Adding Color Group Variant to a component:

If your component has variant with more than one color you can create color groups. Follow the steps below to create a color group within a component:

Click ‘ **+ New color variant ** '

1. Click the dropdown.
2. Select the desired color.

Click ‘ + Add another color ’

1. Click the dropdown.
2. Select the desired color.

1. Add name of your new color group
2. Click ‘ Add color group ’

Your color group variant is now added to the component.

Updated on: 14/05/2025