Attributes

Every action attribute, grouped by purpose.

Activation

Attribute	Required	Description
`data-next-action="<name>"`	yes (one of)	Activates the matching action enhancer. See action values below
`data-next-toggle="cart"`	yes (one of)	Activates `CartToggleEnhancer` — the toggle pattern
`data-next-quantity="increase\|decrease\|input"`	yes (one of)	Activates `QuantityControlEnhancer`

Action Values

`data-next-action=`	Enhancer	Description
`add-to-cart`	`AddToCartEnhancer`	Add a package to the cart
`remove`	`RemoveItemEnhancer`	Remove a package from the cart
`clear-cart`	`ClearCartEnhancer`	Empty the entire cart
`swap`	`SwapPackageEnhancer`	Replace cart contents with one package atomically
`accept-upsell`	`AcceptUpsellEnhancer`	Submit a post-purchase upsell. See Upsells → Accept Button

Package Targeting

Attribute	Used by	Description
`data-next-package-id`	All actions	Package `ref_id` to target
`data-next-quantity`	`add-to-cart`, `swap`	Quantity to add or set. Default `1`
`data-next-selector-id`	`add-to-cart`, `accept-upsell`	Read the package from a linked `PackageSelectorEnhancer` instead of using `data-next-package-id`
`data-next-package-sync`	`data-next-toggle="cart"`	Comma-separated package IDs whose total quantity mirrors this toggle

Modifiers

Attribute	Description
`data-next-clear-cart`	When `true`, clear the cart before performing the action
`data-next-url`	URL to navigate to after the action completes
`data-step`	Step value for `data-next-quantity="increase"` / `"decrease"`. Default `1`

Attach custom key-value metadata to the cart line item created by an add-to-cart action. Properties appear on the order in the backend and can be used for personalisation, engravings, or any order-level metadata.

Attribute	Description
`data-next-property-container`	CSS selector for a container element. Any `[data-next-property-key]` inputs inside it are collected and sent as properties on the line item. Scoped to this button — does not affect other buttons on the page.
`data-next-default-property-key="<key>"`	Place on any `<input>`, `<textarea>`, or `<select>` anywhere on the page. Its value is applied as a property to every `add-to-cart` (and every bundle line item) on the page. Container-scoped properties with the same key take precedence.

Place data-next-property-key="<key>" on <input>, <textarea>, or <select> elements inside the container named by data-next-property-container to define the property key for each field.

Properties are resolved at click time, so the current field values are captured when the user submits. When the item is already in the cart, any change to a data-next-property-key or data-next-default-property-key input immediately updates the cart item's properties.

<!-- Container holds the per-button property inputs -->
<div id="personalisation-form">
  <input type="text" data-next-property-key="engraving" placeholder="Engraving text" />
  <input type="text" data-next-property-key="gift_wrap" placeholder="Gift wrap message" />
</div>

<button data-next-action="add-to-cart"
        data-next-package-id="42"
        data-next-property-container="#personalisation-form">
  Add to Cart
</button>

For a property that should apply to every item regardless of which button is clicked, use data-next-default-property-key on a standalone input anywhere on the page:

<input type="text"
       data-next-default-property-key="order_note"
       placeholder="Order note" />

State Container

Attribute	Description
`data-next-state-container`	Marks an element as a state container. Children with `data-next-state="<state>"` are shown selectively
`data-next-state="in-cart"`	Show this child when the bound package is in the cart
`data-next-state="not-in-cart"`	Show this child when the bound package is not in the cart
`data-next-state="loading"`	Show this child while an action is in flight

Text State

Attribute	When the text is shown
`data-add-text`	When the package is not in the cart
`data-remove-text`	When the package is in the cart
`data-loading-text`	While an async action is in flight

The SDK rewrites the element's text content when the state changes.

CSS Classes Managed

Class	Applied when
`next-loading`	An async action is in flight on this element
`next-in-cart`	The bound package is in the cart
`next-disabled`	The action cannot be triggered (no order, no selection, processing, etc.)
`next-active`	The toggle is in the "active" state (item in cart)

The native disabled attribute is also toggled alongside next-disabled.

Cart System → Buttons — full guide to building cart UIs
Selection — selector containers and cards
Upsells — data-next-action="accept-upsell" patterns