RemoveAssociateButton

A button that opens the removal confirmation, for a surface whose trigger is a button — a detail page, a toolbar.

import { RemoveAssociateButton } from "@evolve-storefront/feature-organization/remove-associate-button";

Renders inside OrganizationProvider.

Design notes

Owns the open state, which is the whole of what it adds: everything else is RemoveAssociateDialog. Reach for the dialog directly where the trigger is not a button, or where there is no trigger at all.

Preview

DefaultOpen in Storybook ↗

Usage

Confirming runs the removal against the mock transport and closes the dialog.

// On an associate's detail page: the mutation is bound inside, and the button
// owns its trigger and open state.
<RemoveAssociateButton
  associate={associate}
  onRemoved={() => router.push("/account/associates")}
/>;

Props

Prop	Type	Description
associate	BusinessUnitAssociate
children?	ReactNode	An optional trigger, rendered inside the dialog so it can open it. Omit it when driving open yourself — which is the case a row action needs.
defaultOpen?	boolean
onRemoved?	(() => void)

Change the layout

Pass children to RemoveAssociateButton to arrange its parts yourself. Every part is exported from @evolve-storefront/feature-organization/remove-associate-button.

RemoveAssociateDialogThe confirmation for removing an associate: the copy, the destructive tone, the pending label, and the lock-out guard's error, in one place.

Takes open / onOpenChange, and renders no trigger unless given one. That is what a row action needs and what this could not do before: a menu item cannot be an AlertDialogTrigger, because the menu closes on select and unmounts the item — taking the trigger with it before the dialog has opened. The remedy is to hold the open state outside the menu and set it from the item's onSelect, so a component that owns its own boolean is unusable exactly where per-record destructive actions live. ActionsMenu documents the same constraint from the other side.

The lock-out guard is enforced server-side and surfaced as a ValidationError.

Prop	Type	Description
associate	BusinessUnitAssociate
open?	boolean	Controlled open state. Omit to let the dialog own it.
onOpenChange?	((open: boolean) => void)
defaultOpen?	boolean
onRemoved?	(() => void)
children?	ReactNode	An optional trigger, rendered inside the dialog so it can open it. Omit it when driving open yourself — which is the case a row action needs.

Examples

With Own TriggerA caller-supplied trigger replaces the default button.

<RemoveAssociateButton associate={associate}>
  <Button variant="tertiary" tone="destructive">{t("remove-from-company")}</Button>
</RemoveAssociateButton>;

Open in Storybook ↗