Variant

Add a Variant property to your component for designers to choose from a predefined list of options.

Syntax

1
// Prop definition
2
props.Variant({
3
    name: string,
4
    options: string[],
5
    group?: string,
6
    tooltip?: string,
7
    defaultValue?: string,
8
})
9
10
// Prop value
11
string

Prop Definition

Define the Variant prop in your Webflow code component with a name and list of options. Optionally, you can add a group, tooltip text, and a default value that matches one of the pre-defined options.

1
props.Variant({
2
    name: string,
3
    options: string[],
4
    group?: string,
5
    tooltip?: string,
6
    defaultValue?: string,
7
})

Properties

• name: The name for the property.
• group: The group for this property. (optional)
• tooltip: The tooltip for the property. (optional)
• options: Array of available variant options.
• defaultValue: Default selected option. (optional)

Example

1
import { declareComponent } from '@webflow/react';    
2
import { props } from '@webflow/data-types';
3
import { MyComponent } from "./MyComponent";
4
import "../styles/globals.css";
5
6
export default declareComponent(MyComponent, {
7
    name: "MyComponent",
8
    description: "A component with a Variant property",
9
    props: {
10
        style: props.Variant({
11
            name: "Button Style",
12
            group: "Style",
13
            options: ["Primary", "Secondary", "Tertiary"],
14
            defaultValue: "Primary"
15
        })
16
    }
17
});

Prop Value

The Variant prop provides a string value representing the selected option to your React component.

1
string

Properties

• n/a

Webflow properties panel

Example

1
import React from "react";
2
import "../styles/globals.css";
3
4
interface MyComponentProps {
5
    style?: "Primary" | "Secondary" | "Tertiary";
6
}
7
8
export const MyComponent = ({ style }: MyComponentProps) => {
9
    return (
10
        <button className={`button button--${style?.toLowerCase()}`}>
11
        Click me
12
        </button>
13
    );
14
}

When to use

Use a Variant prop when you want designers to:

• Choose from predefined visual styles
• Switch between component variations / themes
• Control component appearance

Best practices

• Use clear, descriptive option names
• Provide a sensible default value
• Keep options list manageable