States and Variants are powerful tools within Main Components that help you design flexible, scalable, and consistent user interfaces. They let you manage interactive behaviors and purposeful design variations, all within a single, reusable component.
What are States?
States define how a component responds to user interactions, such as hovering, pressing, or focusing. These are built-in behaviors based on standard CSS pseudo-classes. States are triggered automatically by user actions, so all you need to do is define how the component looks in each state.
State Types
State | Description |
Default | The component's base appearance before any interaction. |
Hover | Style is applied when a user hovers over the component. |
Pressed | Style shown while a component is being clicked or tapped. |
Focused | Visual indicator when a component receives focus via mouse, keyboard, or touch. |
Focused (keyboard) | A focus style triggered specifically via keyboard (e.g., using the |
What are Variants?
Variants are alternate versions of a component that are used for different use cases, themes, or contexts. Instead of creating separate components for each design, you can house them all as Variants within a single Main Component.
Examples of Variants
Component | Variant Examples |
Button | Primary, Secondary, Danger |
Card | Compact, Detailed, Featured |
Navbar | Light mode, Dark mode |
Variants are manually defined by the designer and can be used to adapt components to brand styles or layouts.
Key Differences
| States | Variants |
Triggered by | User interaction or browser behavior | Design intent |
Examples | Hover, Pressed, Focused | Primary, Secondary, Large, Dark Mode |
Purpose | Style based on interaction | Style for different contexts |
Using States and Variants Together
Combining States and Variants lets you create components that are both dynamic and adaptable. Use both to build responsive, consistent, and scalable components, without the effort of duplication.
Example: A Button Component
Variants | States |
Primary | Default, Hover, Pressed, Focused |
Secondary | Default, Hover, Pressed, Focused |
With this setup, you get two distinct button styles, each with its own interactive behavior, all managed within one reusable component.
How to Use States
Applying a State
Select the Main Component (i.e. a button or link) to which you want to apply a state.
Enter the 'Edit mode' of the Main Component.
Go to the styles panel.
Click the States dropdown and choose the desired state (i.e., Hover, Pressed, Focused)
Update the styles (i.e., change background color or add borders)
Preview your project to test how the states respond.
Adding a State Transition
Ensure the 'Default state' is selected.
Scroll to the bottom of the style panel and find the Transition section.
Clicking the '+' button.
Adjusting settings such as easing, duration, and delay.
Preview the project to see the transition in action.
Tip: If the transition doesn't work, check whether the properties in the target state (i.e., hover) are different from the default.
How to Use Variants
Adding or Editing a Variant
Enter 'Edit mode' for the Main Component.
Go to the left panel and click the '+' button to create a new variant.
Give the variant a descriptive name (i.e., Secondary)
Modify the component by showing/hiding layers or changing styles. Note: Adding or deleting layers can only be done in the default variant. For other variants, you need to show or hide the layers.
Exit 'Edit mode' to save your new variant.
Using a Variant
Add the Main Component to the canvas.
Select the component and go to the styles panel.
Use the variant dropdown at the top to switch between different variants of the component.
Deleting a Variant
Enter 'Edit mode' and select the variant.
Click the 'Delete' button.
Confirm the deletion.
Best practices
Clear visual distinctions: Ensure there is a noticeable difference between states like hover, focus, and pressed to guide user interactions.
Consistency: Maintain consistent state behavior across similar components to create a uniform experience.
Purposeful variants: Each variant should serve a clear, distinct purpose, such as different button types or sizes.
Intuitive naming: Use clear and descriptive naming conventions for variants (i.e., 'Button/Primary' or 'Card/with Image') to make components easy to identify.
Scalability: Design with future needs in mind, planning for additional variants or states that might be required later.
Responsive design: Ensure states and variants are responsive across devices (desktop, mobile, tablet) for a seamless user experience.
Accessibility: Provide visible focus indicators for keyboard navigation and ensure all states and variants meet color contrast and text size guidelines to be accessible for all users. Learn how to optimize for accessibility in Vev.