Skip to main content

Modal

The modal component displays content in an overlay. Use to create a distraction-free experience such as a confirmation dialog or a settings panel.

A button triggers the modal using the commandFor attribute. Content within the modal scrolls if it exceeds available height.

Support
Targets (29)

Supported targets

  • purchase.checkout.actions.render-before
  • purchase.checkout.block.render
  • purchase.checkout.cart-line-item.render-after
  • purchase.checkout.cart-line-list.render-after
  • purchase.checkout.contact.render-after
  • purchase.checkout.delivery-address.render-after
  • purchase.checkout.delivery-address.render-before
  • purchase.checkout.footer.render-after
  • purchase.checkout.header.render-after
  • purchase.checkout.payment-method-list.render-after
  • purchase.checkout.payment-method-list.render-before
  • purchase.checkout.pickup-location-list.render-after
  • purchase.checkout.pickup-location-list.render-before
  • purchase.checkout.pickup-location-option-item.render-after
  • purchase.checkout.pickup-point-list.render-after
  • purchase.checkout.pickup-point-list.render-before
  • purchase.checkout.reductions.render-after
  • purchase.checkout.reductions.render-before
  • purchase.checkout.shipping-option-item.details.render
  • purchase.checkout.shipping-option-item.render-after
  • purchase.checkout.shipping-option-list.render-after
  • purchase.checkout.shipping-option-list.render-before
  • purchase.thank-you.announcement.render
  • purchase.thank-you.block.render
  • purchase.thank-you.cart-line-item.render-after
  • purchase.thank-you.cart-line-list.render-after
  • purchase.thank-you.customer-information.render-after
  • purchase.thank-you.footer.render-after
  • purchase.thank-you.header.render-after

Anchor to propertiesProperties

Anchor to accessibilityLabel
accessibilityLabel
string

A label that describes the purpose of the modal. When set, it will be announced to users using assistive technologies and will provide them with more context.

This overrides the heading prop for screen readers.

Anchor to heading
heading
string

A title that describes the content of the Modal.

Anchor to id
id
string

A unique identifier for the element.

Anchor to padding
padding
'base' | 'none'
Default: 'base'

Adjust the padding around the Modal content.

base: applies padding that is appropriate for the element.

none: removes all padding from the element. This can be useful when elements inside the Modal need to span to the edge of the Modal. For example, a full-width image. In this case, rely on Box with a padding of 'base' to bring back the desired padding for the rest of the content.

Anchor to size
size
'small' | 'large' | 'base' | 'small-100' | 'large-100' | 'max'
Default: 'base'

Adjust the size of the Modal.

max: expands the Modal to its maximum size as defined by the host application, on both the horizontal and vertical axes.

Anchor to eventsEvents

Learn more about registering events.

Anchor to afterhide
afterhide
<typeof tagName>

Callback fired when the overlay is hidden after any animations to hide the overlay have finished.

Anchor to aftershow
aftershow
<typeof tagName>

Callback fired when the overlay is shown after any animations to show the overlay have finished.

Anchor to hide
hide
<typeof tagName>

Callback fired after the overlay is hidden.

Anchor to show
show
<typeof tagName>

Callback fired after the overlay is shown.

Anchor to slotsSlots

Learn more about component slots.

Anchor to primary-action
primary-action
HTMLElement

The primary action to perform, provided as a button type element.

Anchor to secondary-actions
secondary-actions
HTMLElement

The secondary actions to perform, provided as button type elements.

Anchor to methodsMethods

Learn more about component methods.

Anchor to hideOverlay
hideOverlay
() => void
required

Method to hide an overlay.

Examples
<s-button command="--show" commandfor="modal-1">Add Product</s-button>
<s-modal id="modal-1" heading="Return Policy">
<s-paragraph>
We have a 30-day return policy, which means you have 30 days after receiving
your item to request a return.
</s-paragraph>
<s-paragraph>
To be eligible for a return, your item must be in the same condition that
you received it, unworn or unused, with tags, and in its original packaging.
You’ll also need the receipt or proof of purchase.
</s-paragraph>
<s-button
variant="primary"
command="--hide"
commandfor="modal-1"
slot="primary-action"
>
Close
</s-button>
</s-modal>

Preview

Was this page helpful?