Modal

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

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 hideOverlay hideOverlay () => void: Method to hide an overlay.
Anchor to padding padding "base" | "none": 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 showOverlay showOverlay () => void: Method to show an overlay.
Anchor to size size "small" | "small-100" | "base" | "large" | "large-100": Adjust the size of the Modal.
Anchor to toggleOverlay toggleOverlay () => void: Method to toggle the visiblity of an overlay.

Was this section helpful?

Anchor to eventsEvents

Learn more about registering events.

Anchor to afterhide afterhide <typeof tagName> | null
Anchor to aftershow aftershow <typeof tagName> | null
Anchor to hide hide <typeof tagName> | null
Anchor to show show <typeof tagName> | null

Was this section helpful?

Anchor to slotsSlots

Anchor to primary-action primary-action HTMLElement: The primary action to perform.

Only a Button with a variant of primary is allowed.
Anchor to secondary-actions secondary-actions HTMLElement: The secondary actions to perform.

Only ButtonGroup or Button with a variant of secondary or auto are allowed.

Was this section helpful?

Code

<s-button commandFor="modal">

Open

</s-button>

<s-modal id="modal" heading="Details">

<s-paragraph>

Displaying more details here.

</s-paragraph>

<s-button

slot="secondary-actions"

commandFor="modal"

command="--hide">

</s-button>

<s-button

slot="primary-action"

variant="primary"

commandFor="modal"

command="--hide">

Save

</s-button>

</s-modal>

Examples

Code

Default

<s-button commandFor="modal">
  Open
</s-button>

<s-modal id="modal" heading="Details">
  <s-paragraph>
    Displaying more details here.
  </s-paragraph>

  <s-button
    slot="secondary-actions"
    commandFor="modal"
    command="--hide">
    Close
  </s-button>
  <s-button
    slot="primary-action"
    variant="primary"
    commandFor="modal"
    command="--hide">
    Save
  </s-button>
</s-modal>

Modal

Anchor to propertiesProperties

Anchor to eventsEvents

CallbackEventListener

CallbackEvent

Anchor to slotsSlots

Code

Examples

Code

Default

Preview