Envie
ReferenceComponents

<envie-button>

Toggle save state for a product or variant.

Toggle save state for a product or variant.

Give it product-id when you have one. A handle alone is enough — the id is resolved from the shop on first click, which is what makes auto-injection onto collection cards cheap: a card links to /products/{handle} and knows no id, and resolving every card up front would cost one request per card.

Attributes

AttributeDescription
product-idShopify product id. Optional when handle is present.
variant-idShopify variant id. Omit for a product-level save.
handleProduct handle. Required on Liquid storefronts.
disabled
savedReflected. Style with envie-button[saved].
busyReflected while a request is in flight.

Events

EventDescription
envie:added
envie:removed
envie:error
undefined

CSS parts

PartDescription
buttonThe real &lt;button>.
labelText node wrapper.

For the full styling contract — state attributes, tokens, and the rules behind them — see the theming guide.

On this page