ShoppingListShareButton

Opt-in: create a shareable anonymous list from a set of SKUs and surface the copyable URL plus any SKUs the backend dropped as invalid.

import { ShoppingListShareButton } from "@evolve-storefront/feature-shopping-list/shopping-list-share-button";

Preview

// Creates an anonymous list from the SKUs and shows its URL to copy.
<ShoppingListShareButton skus={skus} />;

Prop	Type	Description
`skus`	`string[]`	SKUs to include in the shareable list.
`type?`	`"reset" \| "button" \| "submit"`
`isPending?`	`boolean`	The action is running. The button keeps its label, so its width and accessible name hold, shows a spinner and is `aria-busy`. It stays focusable rather than `disabled`, so focus is not dropped mid-save; clicks and the form submit it would trigger are ignored. Not supported with `asChild`.
`variant?`	`ButtonVariant`
`tone?`	`ButtonTone`
`isIconOnly?`	`boolean`	The button has no visible label, so it is square. Structural rather than a size: it says the button has nothing to be wide for, and says nothing about how big — the brand's control tokens still decide that. More Not inferred from the children. A kebab menu is as often a glyph or an SVG as an `<Icon>`, and a visually-hidden label — the accessible thing to add — would break any `:only-child` predicate silently.
`asChild?`	`boolean`
`data-component?`	`undefined`	A button's identity is not a caller's to rename — see `buttonProps`. Typed away so a call site renaming it fails to compile rather than passing an attribute that is silently discarded.
`description?`	`string`
`children?`	`ReactNode`

Any other props go to the root element, like on a plain HTML element.

With Invalid SkusA SKU the backend does not know is left out of the shared list and named in the dialog.

// The dialog names any SKU the backend dropped as invalid.
<ShoppingListShareButton skus={["ESP-1KG", "DISCONTINUED-01"]} />;