Overlays

Overlay

Controlled transient-surface primitive for stacking, scrim, focus, and dismissal.

Playground

Configure the baseline public contract and copy synchronized Vue markup.

Open overlay

Overlay content

Vue

<m-button
  @click="open = true"
>
  Open overlay
</m-button>

<m-overlay
  mode="modal"
  :persistent="false"
  scrim
  close-on-outside
  close-on-escape
  v-model="open"
>
  <m-surface
    variant="elevated"
    shape="extra-large"
    :style='{&quot;padding&quot;:&quot;32px&quot;,&quot;minWidth&quot;:&quot;280px&quot;}'
  >
    <p>
      Overlay content
    </p>
    <m-button
      @click="open = false"
    >
      Close
    </m-button>
  </m-surface>
</m-overlay>

MOverlay API

Props, slots, and events are extracted from the current public UI Kit contract.

MOverlay

Overlay family

src/runtime/components/ui/overlay

Props

NameTypeDefault

mode`modal` isolates the background (scrim + scroll lock + focus). `popover` keeps context.

'modal' | 'popover''modal'

persistentBlock user dismissal (outside/escape); programmatic `v-model` still closes.

booleanfalse

scrimRender a scrim. Defaults to `true` in modal mode, `false` in popover mode.

boolean | undefinedundefined

closeOnOutsideClose on an outside pointer press.

booleantrue

closeOnEscapeClose on Escape (only the topmost eligible overlay).

booleantrue

teleportToTeleport target for the overlay root.

string | HTMLElement'#ui-overlay-host'

transitionContent transition name; `false` disables it. Consumers usually supply motion.

string | falseundefined

Slots

Events

@click:outsidePointerEvent

@dismissMOverlayDismissReason

@after:entervoid

@after:leavevoid