ShoppingListDeleteButton

Delete control with a confirmation dialog; compose it into headerActions.

import { ShoppingListDeleteButton } from "@evolve-storefront/feature-shopping-list/shopping-list-delete-button";

Renders inside ShoppingListProvider.

Preview

DefaultOpen in Storybook ↗

Usage

The built-in destructive trigger + confirmation dialog.

// No children: the built-in destructive trigger opens the confirmation.
<ShoppingListDeleteButton list={list} onDeleted={() => router.push("/shopping-lists")} />;

Props

Prop	Type	Description
list	ShoppingList | ShoppingListOverviewItem
defaultOpen?	boolean
onDeleted?	(() => void)	Runs after a successful delete (e.g. navigate back to the overview).
children?	ReactNode	Custom trigger; defaults to a destructive button labelled "Delete".
open?	boolean	Controlled open state. Provide together with onOpenChange to drive the confirmation dialog from an external control (e.g. a dropdown menu item); the built-in trigger is then omitted.
onOpenChange?	((open: boolean) => void)

Examples

Composedchildren replaces the trigger; the confirmation and the delete stay the same.

<ShoppingListDeleteButton list={list}>
  <Button variant="tertiary" tone="destructive" isIconOnly aria-label={t("delete-list")}>
    <Icon name="remove" />
  </Button>
</ShoppingListDeleteButton>;

Open in Storybook ↗