SetDefaultAddressButton

Mark an address as the default shipping and/or billing address.

import { SetDefaultAddressButton } from "@evolve-storefront/feature-account/set-default-address-button";

Renders inside AccountProvider.

Preview

ShippingOpen in Storybook ↗

Usage

Without a kind, the address becomes the default shipping address.

const { data: customer } = useAccount();

// In the book's renderItem: a badge for the default, the button for the rest.
address.id === customer?.defaultShippingAddress?.id ? (
  <span>{t("default-badge")}</span>
) : (
  <SetDefaultAddressButton addressId={address.id} />
);

Props

Prop	Type	Description
addressId	string
type?	"button" | "reset" | "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.
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.
kind?	"shipping" | "billing" | "both"	Which default to set (default "shipping"); "both" sets each in one call.
children?	ReactNode

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

Examples

Shipping And Billingkind="both" moves the shipping and the billing default in one call.

<SetDefaultAddressButton addressId={address.id} kind="both">
  {t("use-for-both")}
</SetDefaultAddressButton>;

Open in Storybook ↗

Billingkind="billing" leaves the shipping default where it is.

<SetDefaultAddressButton addressId={address.id} kind="billing">
  {t("use-for-billing")}
</SetDefaultAddressButton>;

Open in Storybook ↗