Modal

A centered overlay dialog with title / body / footer slots, four sizes, six theme colours, and a modelValue binding contract that matches drawer / popover / toast. Renders into a body portal to escape transformed ancestors and stays fully invisible while closed (no shadow halo bleed). Toggle Vue / CSS to switch the live demo and source together.

Basic

Simple modal with title, body, and close button.

Vue SFC

Sizes

sm, md, lg and xl.

Vue SFC

Colors

All built-in color variants.

Vue SFC

Confirmation

Cancel + Confirm footer that triggers a status update.

Vue SFC

Form

Modal containing an input + submit button.

Vue SFC

Persistent

Overlay-click and Escape do not close — only the buttons or the ✕ work.

Vue SFC

No overlay

Page behind stays interactive.

Vue SFC

Event log

Live log of mno-close events showing which source closed the modal.

Vue SFC

Customized

Override per-element styling with cssClass (Vue) or utility classes (CSS).

Vue SFC