Get all variants of a component (Beta)

component.getVariants()

Retrieves all variants of a component.

Beta

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

Syntax

component.getVariants(): Promise<Variant[]>

Returns

Promise<Array<Variant>>

A promise that returns an array of variants.

Example

const component = (await webflow.getAllComponents())[0];
const variants = await component.getVariants();
console.log(variants);
// [
// { id: 'base', name: 'Primary', isSelected: true },
// { id: 'xxxx', name: 'Secondary', isSelected: false },
// ]
// Find which variant the user is currently editing
const activeVariant = variants.find(v => v.isSelected);
console.log(`Currently editing: ${activeVariant?.name}`);

Designer Ability

Checks for authorization only

Designer AbilityPermissionLocaleBranchWorkflowSitemode
canAccessCanvasanyanyanyanyany