Dialog

Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks. They appear on top of the page content.

Basic Dialog

Open Dialog

Dialog Title

This is the dialog content. It can contain text, forms, or any other elements.

Cancel

Confirm

<me-dialog id="dialog"> <me-dialog-title>Dialog Title</me-dialog-title> <me-dialog-content> Dialog content goes here. </me-dialog-content> <me-dialog-actions> <me-button variant="text">Cancel</me-button> <me-button color="primary">Confirm</me-button> </me-dialog-actions> </me-dialog> <script> document.querySelector('#open-btn').addEventListener('click', () => { document.querySelector('#dialog').setAttribute('open', ''); }); document.querySelector('#dialog').addEventListener('me-close', () => { document.querySelector('#dialog').removeAttribute('open'); }); </script>

Max Width Variants

xs (444px)

sm (600px)

md (960px)

Extra Small Dialog

This dialog has max-width="xs" (444px).

Small Dialog

This dialog has max-width="sm" (600px).

Medium Dialog

This dialog has max-width="md" (960px).

Full Width

Full Width Dialog

Full Width

This dialog stretches to fill its max-width container.

With Dividers

Dialog with Dividers

Scrollable Content

When content might scroll, use dividers on the content area to visually separate it from the title and actions.

This border helps users see that there is more content above or below when they scroll.

API — me-dialog

Attribute	Type	Default	Description
`open`	boolean	false	Whether the dialog is visible.
`max-width`	xs \| sm \| md \| lg \| xl	sm	Maximum dialog width.
`full-width`	boolean	false	Stretch to fill max-width.
`full-screen`	boolean	false	Full-screen overlay (mobile).

Events

Event	Detail	Description
`me-close`	`{ reason: 'backdropClick' \| 'escapeKeyDown' }`	Fired when the backdrop is clicked or Escape is pressed.

Sub-components

Element	Attributes	Description
`me-dialog-title`	—	Dialog heading (1.25rem, 500 weight).
`me-dialog-content`	`dividers`	Scrollable body area. Add `dividers` for top/bottom borders.
`me-dialog-actions`	`disable-spacing`	Action button row. Add `disable-spacing` to remove padding/gap.