Get a variant by ID (Beta)

`component.getVariant(variantId)`

Retrieves a component variant by its ID.

Beta

These methods are in public beta and may change with future releases.

Syntax

1 component.getVariant(variantId: string): Promise<Variant>

Parameters

variantId: string — The ID of the variant to retrieve. Pass 'base' to retrieve the base variant.

Returns

Promise<Variant>

A Promise that resolves to the Variant object with the given ID.

Property	Type	Description
`id`	`string`	The unique identifier of the variant.
`name`	`string`	The name of the variant.
`isSelected`	`boolean`	Whether this variant is currently selected in the Designer.

Example

1 const component = await webflow.getCurrentComponent()
2 
3 if (component) {
4   // Get a specific variant by ID
5   const variant = await component.getVariant('variant-123')
6   console.log(variant)
7   /*
8   {
9     id: 'variant-123',
10     name: 'Secondary Hero',
11     isSelected: true,
12   }
13   */
14 
15   // Get the base variant
16   const base = await component.getVariant('base')
17   console.log(base)
18   /*
19   {
20     id: 'base',
21     name: 'Primary',
22     isSelected: false,
23   }
24   */
25 }

Try this example

Designer Ability

Checks for authorization only

Designer Ability	Permission	Locale	Branch	Workflow	Sitemode
canAccessCanvas	any	any	any	any	any

1	const component = await webflow.getCurrentComponent()
2
3	if (component) {
4	// Get a specific variant by ID
5	const variant = await component.getVariant('variant-123')
6	console.log(variant)
7	/*
8	{
9	id: 'variant-123',
10	name: 'Secondary Hero',
11	isSelected: true,
12	}
13	*/
14
15	// Get the base variant
16	const base = await component.getVariant('base')
17	console.log(base)
18	/*
19	{
20	id: 'base',
21	name: 'Primary',
22	isSelected: false,
23	}
24	*/
25	}