← Web Components

Web Components · Account

<mmm-address>

Address book — list, add, edit, and delete saved addresses for the signed-in customer. Country-aware (state pickers, postal format hints). Distinct from the address fields inside <mmm-checkout-shipping-address> which edit a single in-checkout address.

Overview

Shows the customer's saved addresses as cards with Edit / Delete actions plus an Add-new button. Add and Edit open the same form; Delete prompts before calling the SDK. Add-button position is per-breakpoint configurable.

Quick start

<script src="https://v2-api-production.commmerce.com/api/v1/web-component/commmerce-sdk.js?store=sample-store"></script>

<mmm-address></mmm-address>

Attributes

AttributeTypeDefaultDescription
theme-modestringlightlight or dark — switches the default palette. Inline colour attrs still win.
background-colorstring#f5f5f5 (light) / #121212 (dark)Page background.
panel-backgroundstring#ffffff (light) / #1f1f1f (dark)Form panel background.
card-backgroundstring#ffffff (light) / #1f1f1f (dark)Address card background.
font-familystringtheme description fontCard font family.
description-font-weightstringtheme description weight / 400Body weight.
heading-font-weightstringtheme heading weight / 600"Addresses" heading weight.
sub-heading-font-weightstringtheme sub-heading weight / 500Address-label weight.
text-primary-colorstringtheme primary text / #111Primary text colour.
text-secondary-colorstringtheme secondary text / #666Helper-text colour.
input-stroke-colorstringtheme input stroke / #dddInput border colour.
button-colorstringtheme button fill / #000Save-address button background.
border-colorstringtheme border / #e5e7ebCard border colour.
border-radiusstringtheme border radiusBorder-radius for cards, inputs, buttons.
button-font-sizestringtheme button size / 14pxButton font size.
button-font-weightstringtheme button weight / 500Button font weight.
button-font-familystringtheme button font / inheritButton font family.
delete-btn-bg-colorstringblackDelete-button background.
delete-btn-border-colorstringwhiteDelete-button border.
delete-btn-colorstringwhiteDelete-button text colour.
delete-hover-btn-bg-colorstring#dc3545Delete-button hover background (signals destructive).
delete-hover-btn-colorstring#fffDelete-button hover text colour.
edit-btn-bg-colorstringblackEdit-button background.
edit-btn-colorstringwhiteEdit-button text colour.
add-btn-xlstringtop-rightAdd-new-address button position on XL viewports — top-right, top-left, bottom-right, bottom-left, bottom bottom.
add-btn-desktopstringtop-rightDesktop add-button position.
add-btn-tabletstringtop-rightTablet add-button position.
add-btn-mobilestringbottom bottomMobile add-button position — defaults to a sticky bottom bar.
add-btn-textstringAdd AddressLabel for the add-new-address button shown on the list view.
empty-add-btn-textstringADD ADDRESSLabel for the add-new-address button shown on the empty-state view.
add-form-titlestringAdd New AddressForm heading when adding a new address.
edit-form-titlestringEdit AddressForm heading when editing an existing address.

Live preview

store sample-store tag <mmm-address>

Examples

1. Default

<mmm-address></mmm-address>

2. Bottom-fixed add button on mobile only

<mmm-address
  add-btn-xl="top-right"
  add-btn-desktop="top-right"
  add-btn-tablet="top-right"
  add-btn-mobile="bottom bottom">
</mmm-address>

3. Brand-coloured destructive action

<mmm-address
  edit-btn-bg-color="#0e1011"
  delete-btn-bg-color="#0e1011"
  delete-hover-btn-bg-color="#ef4444">
</mmm-address>