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
Width & height
For full control, set width, height, min-width, max-width, min-height or max-height directly. Each accepts a CSS string ("760px", "12rem", "80%") or a number — numbers are treated as px (so :width="480" → 480px). Both kebab-case (min-width) and camelCase (minWidth) work. Set both width and height to "100%" for true full screen.
Vue SFC
Stacked
Set stackable to let modals stack — open a modal from inside another, any depth. Each new modal sits above the previous, only one backdrop dims the screen, and Esc / overlay-click affect only the topmost. Without stackable a modal is exclusive: opening one closes any other open modal.
Vue SFC
Draggable
Set draggable to let users move the modal by its header — handy with stacked modals to slide the top one aside and see what's behind. The panel follows the pointer freely while dragging, but snaps back fully inside the viewport when you drop it.
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
The modal emits mno-click on every state change, plus mno-open (on open) and mno-close (on close) — matching the drawer. Each event's detail.source (overlay / close / escape / manual) says what triggered it. The log below shows the close events and their source.
Vue SFC
Customized
Override per-element styling with cssClass (Vue) or utility classes (CSS).
Vue SFC
Types
Import
import { ModalProps } from 'mono-helper'| Prop | Value | Default | Description |
|---|---|---|---|
modelValue | boolean | false | Open state, two-way bound for v-model-style usage. |
size | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Width preset of the modal panel. |
color | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'primary' | Theme color applied to accents. |
title | string | '' | Heading text shown in the modal header. |
dismissible | boolean | true | Shows the close button and allows dismissal. |
persistent | boolean | false | Prevents closing via overlay click or escape. |
overlay | boolean | true | Renders a backdrop overlay behind the panel. |
closeOnEscape | boolean | true | Closes the modal when the Escape key is pressed. |
closeOnOverlay | boolean | true | Closes the modal when the overlay is clicked. |
lockScroll | boolean | true | Locks body scroll while the modal is open. |
draggable | boolean | false | Allow dragging the modal by its header; it snaps back inside the viewport on drop. |
stackable | boolean | false | Allow this modal to stack on top of others. When false (default) it is exclusive — opening it closes any other open modals. |
width | string | number | — | Explicit panel sizing. Each accepts a CSS length string (`"12px"`, `"12rem"`, `"80%"`) or a number / numeric string (interpreted as px). Set both `width` and `height` to `"100%"` for true full-screen. |
height | string | number | — | — |
minWidth | string | number | — | — |
maxWidth | string | number | — | — |
minHeight | string | number | — | — |
maxHeight | string | number | — | — |
cssClass | ModalCssClass | {} | Per-part class overrides for internal elements. |
cssClassName | string | '' | Plain root class string applied to the modal. |