MazDialog

MazDialog is a standalone dialog component to show important informations to the user or propose specific action. Many options are available. You can hide the header or the footer, full-size layout, differents states etc.

Before use it, you should install the MazUi plugin in your project, follow instructions in Getting Started

TIP

This component uses <Teleport to="body"> with MazBackdrop, so you can implement this component anywhere and it inherits all its props

Basic usage

<script setup>
import MazDialog from 'maz-ui/components/MazDialog'
import { ref } from 'vue'

const isOpen = ref(false)
</script>

<template>
  <MazBtn @click="isOpen = true">
    Open Dialog
  </MazBtn>

  <MazDialog v-model="isOpen" title="Dialog Title">
    <p>
      Your content
    </p>

    <template #footer="{ close }">
      <MazBtn @click="close">
        Confirm
      </MazBtn>
    </template>
  </MazDialog>
</template>

Scrollable

For long content, you can enable scrolling in content part (Header and footer slot remain visible at top and bottom)

<MazDialog v-model="scollableOpened" title="Dialog Title" max-height="400px" scrollable>
  <template #title> Scrollable Dialog Title </template>

  <template #default>
    <p v-for="i in 40" :key="i" style="padding-bottom: 2rem">Scroll down</p>
  </template>

  <template #footer>
    <MazBtn @click="scollableOpened = false"> Confirm </MazBtn>
  </template>
</MazDialog>

Width

On tablet and up, the dialog is sized by two CSS variables coming from the active theme preset (components.dialog):

• --maz-dialog-max-width (default 38rem)
• --maz-dialog-min-width (default 32rem)

You can set these defaults globally per preset — see the theme components.dialog documentation. To change the width of a single dialog, pass the max-width / min-width props — they always override the preset:

<template>
  <MazDialog
    v-model="isOpen"
    title="Custom width"
    max-width="50rem"
    min-width="40rem"
  >
    <p>This dialog overrides the preset width through props.</p>
  </MazDialog>
</template>

TIP

The default widths are expressed in rem, so they scale with the preset's base-font-size. Presets with a larger base size (e.g. ocean at 16px) ship rem values adjusted to keep the rendered pixel width consistent across presets.

Accessibility

• The dialog is a modal dialog (aria-modal), labelled by its title and described by its content (override them with the aria-labelledby / aria-describedby props).
• The focus moves into the dialog on open, stays trapped inside and goes back to the previous element on close. Esc closes it (close-on-escape).
• While it is open, the rest of the page is inert (no focus, no click, hidden from assistive technologies), except the toasts and the live regions.

Props

Name	Description	Type	Required	Default	Possible values
model-value	v-model Modal's model value	boolean	No	-	-
title	Title of the modal in header	string	No	-	-
hide-close-button	Remove the close button in header	boolean	No	-	-
max-width	Modal's max-width.	string	No	"var(--maz-dialog-max-width, 38rem)"	-
min-width	Modal's min-width.	string	No	"var(--maz-dialog-min-width, 32rem)"	-
scrollable	Modal's content becomes scrollable - warning: a overflow is applied	boolean	No	-	-
persistent	Persistent dialog (not closable by clicking outside and remove close button)	boolean	No	-	-
teleport-selector	Teleport selector	string	No	-	-
before-close	Function called before modal is close	(() => void | Promise<void>)	No	-	-
close-on-escape	Prevent close on escape key	boolean	No	true	-
transition-name	Transition name	string	No	-	-
backdrop-class	Backdrop class	ClassValue	No	-	-
backdrop-content-class	Backdrop content class	ClassValue	No	-	-
content-padding	Add padding to the content	boolean	No	-	-
justify	Justify content	"none" | "center" | "end" | "start" | "space-between" | "space-around"	No	-	'none' | 'center' | 'end' | 'start' | 'space-between' | 'space-around'
align	Align content	"none" | "center" | "end" | "start"	No	-	'none' | 'center' | 'end' | 'start'
variant	Variant	"bottom-sheet" | "dialog" | "drawer"	No	-	'bottom-sheet' | 'dialog' | 'drawer'
aria-labelledby	ID for aria-labelledby	string	No	-	-
aria-describedby	ID for aria-describedby	string	No	-	-

Events

Event name	Payload	Description
update:model-value	value: boolean	emitted when modal is open or close
open	value?: void | undefined	emitted when modal is open
close	value?: void | undefined	emitted when modal is close

Slots

Name	Description	Bindings
header	Header slot	close () => void - close function
title	Title slot in the header	-
default	Default content	close () => void - close function
footer	Footer slot	close () => void - close function

Expose

close

Close the dialog