Overlays

Dialog

Modal decision surface with managed focus, dismissal, and action grouping.

Playground

Configure the baseline public contract and copy synchronized Vue markup.

Open dialog

The update becomes visible to everyone with access.

Properties

Open

Outside click

Escape

Vue

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

<m-dialog
  title="Publish changes?"
  click-to-close
  esc-to-close
  v-model="open"
>
  The update becomes visible to everyone with access.
  <template #actions>
    <m-button
      variant="text"
      @click="open = false"
    >
      Cancel
    </m-button>
    <m-button
      @click="open = false"
    >
      Publish
    </m-button>
  </template>
</m-dialog>