Choose a version:

Modal

Displays content in an overlay that requires merchant attention. Use to present critical information, confirmations, or focused tasks without losing page context.

Anchor to propertiesProperties

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.

Was this section helpful?

Anchor to slotsSlots

Anchor to primary-action primary-action HTMLElement: The primary action button displayed in the modal.

The tone of the button is used to define the tone of the modal.

If omitted, the modal will default to an 'info' tone, and show an 'OK' button, translated according to the user's locale.
Anchor to secondary-actions secondary-actions HTMLElement: The secondary action buttons displayed in the modal.

Was this section helpful?

Anchor to eventsEvents

Anchor to hide hide (event: <"s-modal">) => void: Callback when the modal is hidden.
Anchor to show show (event: <"s-modal">) => void: Callback when the modal is shown.

CallbackEvent

bubbles
```
boolean
```
cancelable
```
boolean
```
composed
```
boolean
```
currentTarget
```
HTMLElementTagNameMap[T]
```
detail
```
any
```
eventPhase
```
number
```
target
```
HTMLElementTagNameMap[T] | null
```

interface CallbackEvent<T extends keyof HTMLElementTagNameMap> {
  currentTarget: HTMLElementTagNameMap[T];
  bubbles?: boolean;
  cancelable?: boolean;
  composed?: boolean;
  detail?: any;
  eventPhase: number;
  target: HTMLElementTagNameMap[T] | null;
}

Was this section helpful?

Code

<s-button command="--show" commandFor="modal">

Open modal

</s-button>

<s-modal id="modal" heading="Changes could not be saved">

Please check your internet connection and try again.

<s-button slot="primary-action">OK</s-button>

</s-modal>

Examples

Code

Default

<s-button command="--show" commandFor="modal">
  Open modal
</s-button>
<s-modal id="modal" heading="Changes could not be saved">
  Please check your internet connection and try again.
  <s-button slot="primary-action">OK</s-button>
</s-modal>

Modal

Anchor to propertiesProperties

Anchor to slotsSlots

Anchor to eventsEvents

CallbackEvent

Examples

Code

Default

Preview