Change component variant via attribute

Currently, when a component variant is selected, webflow adds a random class (e.g. w-variant-ffce73be-b5a0-872e-7574-d245bf8fd187) to store the styles of that variant. I think it would be great to allow more dev oriented folks to change the component variant via changing the attribute variant value, which is already in the html.

So changing the html from:
<a data-wf--button--variant="secondary" href="#" class="button">
<!-- content of the component -->
</a>

to:

<a data-wf--button--variant="tertiary" href="#" class="button">
<!-- content of the component -->
</a>

should make the component variant change form "secondary" to "tertiary". Currently this doesn't work, since the component variant styles are attached to the random .w-variant-[some generated id] class, rather than to the variant attribute.

This would be super flexible for changing component variants even after the site was published, which can be the case when building a little more complex uiis / designs.

  • Fabian Graf
  • Aug 13 2025
  • Reviewed