We've enhanced Main Components with States and Variants, to help you design flexible, scalable, and consistent user interfaces. They allow you to manage interactive behaviours and design variations within a single, reusable component, streamlining your workflow and improving design consistency.

States

States define how a component responds to user interactions such as hovering, pressing, or focusing. Specify the component's appearance in each state, and the system will manage the rest.

Use case:

• Create interactive components, like a button or card with hover styles, providing clear visual feedback.
• Ensure accessibility with focus styles for keyboard navigation.

Variants

Variants are alternate versions of a component used for different contexts. Instead of creating a separate component for each design, you can house them all as Variants within a single Main Component.

Use case:

• Build a component system with ready-made layout options, ensuring brand consistency.
• Provide dark and light theme variants, allowing for easy mode switching.

Combining States and Variants

By combining States and Variants, you can create reusable components that are consistently dynamic and adaptable, eliminating the need for copying and pasting.

Use case:

• Create a reusable button component housing primary and secondary variants, both with built-in hover, pressed, and focused states.

Get Started

• Adding States: Select your Main Component, enter "Edit mode", then navigate to the style panel. Select the desired state (i.e., Hover, Pressed) from the States dropdown.
• Creating Variants: To create a new variant, enter "Edit mode" for your Main Component and head over to the left panel and click the "Add variant" button. Now you have a new variant ready to be styled.
• Using Variants: To use an existing variant of your Main Component, simply select the component and use the variant dropdown at the top of the style panel.

Learn more

→ How States and Variants benefit your workflow

→ Learn how to use States and Variants