Choose a version:

Modal

Use s-modal to display content in an overlay. Modals are used to display important information that requires the merchant's attention.

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
Anchor to secondary-actions secondary-actions HTMLElement

Was this section helpful?

Anchor to eventsEvents

Anchor to hide hide (event: <"s-divider">) => void
Anchor to show show (event: <"s-divider">) => void

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="Header">

<s-stack alignItems="center" justifyContent="center" gap="base">

<s-text color="subdued">Subheader</s-text>

</s-stack>

<s-button slot="primary-action" onClick={handlePrimaryAction}>

Label

</s-button>

</s-modal>

Examples

Code

Default

<s-button command="--show" commandFor="modal">Open modal</s-button>
<s-modal id="modal" heading="Header">
  <s-stack alignItems="center" justifyContent="center" gap="base">
    <s-text color="subdued">Subheader</s-text>
  </s-stack>
  <s-button slot="primary-action" onClick={handlePrimaryAction}>
    Label
  </s-button>
</s-modal>

Modal

Anchor to propertiesProperties

Anchor to slotsSlots

Anchor to eventsEvents

CallbackEvent

Examples

Code

Default

Preview