Get selected variant (Beta)

`component.getSelectedVariant()`

Retrieves the selected variant of a component.

If no variant is selected (that is, with the isSelected attribute set to true), the function returns the base variant of the specified component. Similarly, if the currently selected component in the Designer is not a variant of the specified component, no variant of the specified component is selected, so the function returns the base variant of the specified component.

Beta

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

Syntax

1 component.getSelectedVariant(): Promise<Variant>

Returns

Promise<Variant>

A promise that returns a variant.

Example

1 const selectedVariant = await heroComponent.getSelectedVariant();
2 /*
3 {
4   id: 'variant-123',
5   name: 'Secondary Hero',
6   isSelected: true,
7 }
8 */
9 // When no variant is explicitly selected, returns base
10 const base = await heroComponent.getSelectedVariant();
11 /*
12 {
13   id: 'base',
14   name: 'Primary',
15   isSelected: true,
16 }
17 */

Try this example

Designer Ability

Checks for authorization only

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

1	const selectedVariant = await heroComponent.getSelectedVariant();
2	/*
3	{
4	id: 'variant-123',
5	name: 'Secondary Hero',
6	isSelected: true,
7	}
8	*/
9	// When no variant is explicitly selected, returns base
10	const base = await heroComponent.getSelectedVariant();
11	/*
12	{
13	id: 'base',
14	name: 'Primary',
15	isSelected: true,
16	}
17	*/