Component variants

Component variants allow you to create multiple versions of a component — like a button in its default, hover, and disabled states — all in one place. You define the variants on the component, and when you use the component on your canvas, you can switch between variants right in the element settings without touching the original component.

Let's walk through how to create and use variants. I'm going to click into our button component. I can create variants from two places. From the Components panel, I'll click the three dots next to the component name, then click Edit variants. Or I can double-click the component on the canvas, and from the right panel click on Variants.

I'll open the variants panel. I can see a plus button to create a new variant. Let me add the first variant. I'll name it Disabled. Now I'll style the Disabled variant — I'll make the opacity lower and change the cursor to not-allowed. So now when I go back to the canvas and click on the button, I can use the dropdown in the element settings to switch to the Disabled variant, and it shows the disabled state without affecting the original button.

I can add another variant for a larger version. I'll name it Large. Inside the component, I'll increase the padding and font size for this variant. Now when I use the button and switch to the Large variant, it's using the bigger styling.

One more thing worth knowing — variants can also be set conditionally. So if you have a CMS-bound component, you can set up logic that switches to a specific variant based on a field value or condition. That makes variants really powerful for dynamic content.

So to recap: variants let you define multiple visual states in one component. You build and style each variant inside the component, and switch between them in the element settings on the canvas. It keeps your components clean, reusable, and flexible.