Framer variants are alternate visual states of a single component, like default, hover, active, and disabled. They let you design every interaction state in one place, transition between them with animation, and reuse the same component everywhere on your site with consistent behavior across the entire project.
What Variants Solve
Without variants, every interactive element on a website is a small engineering project. A button has a default appearance, a hover treatment, an active state when clicked, a focus ring for keyboard navigation, and a disabled style when actions are unavailable. Building each by hand and wiring them to events is tedious and inconsistent across a team.
Variants collapse this work into one component definition with multiple named states. You design the appearance of each state inside Framer, the engine handles the transitions between them, and the component behaves uniformly everywhere it appears. Change a variant and every instance updates instantly. This is the same primitive that React components and Figma variants provide, brought into a no-code visual environment.
How Variants Work
Inside a Framer component, you can add additional variants by clicking the plus icon in the variants panel. Each variant is a complete copy of the component with its own layer values: position, size, color, opacity, effects, and content. Framer animates between variants when you trigger a state change, interpolating every property that differs.
The most common variant set is two states: default and hover. Add a third for active or pressed. Add a fourth for disabled. For more complex components like form fields, you might have five or six variants covering rest, focus, filled, error, success, and disabled states. The variants panel lists them and you switch between them while designing each.
Common Variant Patterns
Buttons
Buttons are the canonical variant use case. A primary button typically has default, hover, active, focus, and disabled variants. Default is the resting state. Hover lifts slightly with a stronger shadow. Active presses down. Focus shows a keyboard outline. Disabled fades and removes interactivity. Define each visually, configure transitions between them, and the button works reliably across every page.
Form Fields
Form fields use variants to communicate state during input. A text input shows rest, focus, filled, error, and success states. The label might move from inside the field to a smaller position above when the field is filled, suggesting a floating label pattern. Each transition is a variant change handled by Framer.
For deeper coverage of forms, see our framer forms guide.
Toggles and Switches
Toggles have just two variants, on and off, but the visual difference is significant: position of the thumb, color of the track, possibly an icon change. Framer animates between the two with a spring or ease transition that feels physical. This is one of the satisfying use cases that demonstrates the value of variants over hand-built state logic.
Cards With Hover States
Cards often have default and hover variants. The hover variant lifts the card with a stronger shadow, may scale up by 2 to 5 percent, and might reveal a hidden call to action. The interaction signals that the card is clickable without the cursor change being the only cue.
Adding Variants to a Component
Open the component in editing mode. The variants panel sits on the right side. Click the plus icon and Framer creates a new variant labeled by default with a state name like Hover. Edit the layers inside this variant to define how the component should appear in that state. Properties that differ from the base variant are highlighted so you can see what changes.
Once you have multiple variants, the canvas shows them side by side. You can switch between them by clicking each variant in the panel, or you can preview the transition by hovering or clicking the component instance on a page.
Variant Transitions
By default, Framer transitions between variants with a smooth animation. You can customize the curve, duration, and per-property timing. Open the transitions panel and adjust as needed. A 200ms ease-out curve feels responsive for hover states. A spring curve feels playful and works well for toggles and physical-feeling elements.
Per-Property Transitions
Sometimes you want different properties to animate with different timings. Color might fade quickly while position springs in. Framer supports this by configuring transitions per property within the variant settings. Use it sparingly because too many timings feel chaotic, but it shines when you need precise choreography on a hero element.
Triggering Variants With Events
Variants change in response to events. Built-in events include hover, press, focus, and click. Configure them in the interaction panel: when the visitor hovers, switch to the Hover variant. When they release, return to Default. Framer handles entry and exit timing automatically.
For more complex flows, attach variants to custom events from code overrides. A form submission can switch a button from Default to Loading to Success based on the result of the underlying API call. This pattern is the bridge between visual design and dynamic application behavior.
Variants and Component Properties
Component properties are a separate but related system. Properties let you configure a component instance without editing the underlying component, like changing button text or color. Variants are different appearances of the same configuration. Together they let you build a single button component with multiple variants for state and multiple properties for content, used across the entire site with two layers of customization.
For the full component story, see our framer components guide.
Variants in CMS Templates
Variants work inside CMS templates as well. A blog post card can have default and hover variants, and every post rendered from the CMS gets both states automatically. This is how you build polished, interactive lists from dynamic data without per-item configuration.
Performance Considerations
Variants are essentially layer property swaps with interpolation, which is cheap for the browser to handle. Most variant transitions are GPU-accelerated and have negligible performance impact. The exception is heavy effect changes like background blur or complex filters, which can cause jank on lower-end devices during the transition.
If you need many interactive cards on a long scroll, profile the page in the browser performance panel and trim variant transitions that cause measurable jank. Pair this with our website speed optimization guide.
Accessibility and Focus States
Variants should always include a Focus state distinct from Hover. Keyboard users navigate via the tab key and rely on visible focus indicators to know where they are on the page. Skipping focus variants creates an unusable site for anyone who cannot use a mouse, including motor-impaired users and visitors using assistive technology.
A simple keyboard focus ring is enough: a colored outline or shadow around the focused element, distinct from the hover treatment so the visitor knows whether they are hovering or focused.
Common Mistakes to Avoid
Skipping focus and disabled variants is the most common oversight. Default and hover are obvious, but a real component library covers every state. Audit each variant set before shipping.
Building per-page variants instead of reusing one component is another. If every page has a slightly different button, you have lost the consistency that variants exist to provide. One button component with rich variants beats ten copies with similar styling.
Long transition durations on hover states feel sluggish. Keep most variant transitions under 250ms. Reserve longer animations for moments where the visual reward justifies the wait, like loading states or success confirmations.
Frequently Asked Questions
How many variants can a component have?
Framer does not publish a hard limit, and real-world components with 10 to 15 variants work without issue. Past that, components become hard to maintain. Split into multiple components or consider whether properties might handle some of the variation instead.
Can variants have different layer counts?
Variants can add or remove layers, but transitions only animate layers that exist in both states. Layers that appear or disappear typically use opacity or scale to fade in or out rather than appearing instantly.
Do variants work with the CMS?
Yes. CMS templates can use components with variants, and every rendered item inherits the variant set. A blog list with hover states works automatically across hundreds of posts.
How do variants relate to properties?
Variants are different appearances of the same component. Properties are configurable inputs to the component, like text content or color. They are complementary: variants handle state, properties handle configuration.
Can I trigger variants from code?
Yes. Code overrides can set the current variant of a component based on data or events. This is how you connect dynamic application logic to visual states defined in the design.