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

Example

<.s_button command_for="modal">
  Open
</.s_button>
<.s_modal id="modal" heading="Details">
  <.s_paragraph>
    Displaying more details here.
  </.s_paragraph>
  <:secondary_action command_for="modal" command="--hide">Close</.secondary_action>
  <:primary_action command_for="modal" command="--hide">Save</:primary_action>
</.s_modal>

See

• https://shopify.dev/docs/api/app-home/polaris-web-components/overlays/modal

Attributes

• accessibility_label (: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.

• heading (:string) - A title that describes the content of the Modal.

• hide_overlay (:string) - () => void

  Method to hide an overlay.

• padding (:string) - "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.

• show_overlay (:string) - () => void

  Method to show an overlay.

• size (:string) - "small" | "small-100" | "base" | "large" | "large-100"

  Adjust the size of the Modal.

• toggle_overlay (:string) - () => void

  Method to toggle the visiblity of an overlay.

• afterhide (:string)

• aftershow (:string)

• hide (:string)

• show (:string)

• Global attributes are accepted.

Slots

• primary_action - The primary action to perform.

  Only a `Button` with a variant of `primary` is allowed.

• secondary_action - The secondary actions to perform.

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

• inner_block