SModal <s-modal>

import { SModal } from 'polaris-vue-elements'

Example

Open modal

Modal body content goes here.

SaveCancel

<script setup>
import { SButton, SModal } from 'polaris-vue-elements'
</script>

<template>
  <SButton commandFor="example-modal" command="--show">Open modal</SButton>

  <SModal id="example-modal" heading="Example modal">
    <p>Modal body content goes here.</p>

    <!-- The runtime only accepts a primary-action button with variant="primary",
         and secondary-actions buttons with variant="secondary" (or "auto"). -->
    <template #primary-action>
      <SButton variant="primary">Save</SButton>
    </template>
    <template #secondary-actions>
      <SButton variant="secondary">Cancel</SButton>
    </template>
  </SModal>
</template>

Props

Prop	Type	Description
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.
alignSelf	"center" | "start"	Places the Modal on the block axis on a large screen
heading	string	A title that describes the content of the Modal.
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.
size	"base" | "small" | "small-100" | "large" | "large-100"	Adjust the size of the Modal.

Events

Event	Type
afterhide	CustomEvent
aftershow	CustomEvent
hide	CustomEvent
show	CustomEvent

Listen for these with @afterhide-style listeners on <SModal>.

Methods

<SModal> exposes the following methods on its underlying DOM element (accessible via a typed template ref):

• hideOverlay() => void — Method to hide an overlay.
• showOverlay() => void — Method to show an overlay.
• toggleOverlay() => void — Method to toggle the visiblity of an overlay.

<script setup>
import { useTemplateRef } from 'vue'
import { SModal } from 'polaris-vue-elements'

const modal = useTemplateRef<InstanceType<typeof SModal>>('modal')

function callHideOverlay() {
  modal.value?.$el.hideOverlay()
}
</script>

<template>
  <SModal ref="modal" />
</template>

Slots

Slot	Description
default	The content displayed within the modal, typically including form fields, informational text, or interactive elements that require focused user attention.
primary-action	The main action button displayed in the modal footer, representing the primary action users should take. Only accepts a button component with a variant of primary. This action should align with the modal's main purpose, such as "Save", "Confirm", or "Submit".
secondary-actions	Additional action buttons displayed in the modal footer, providing alternative or supporting actions such as "Cancel" or "Learn more". Only accepts button components with a variant of secondary or auto. These are visually de-emphasized compared to the primary action to establish clear hierarchy.