Modal
A modal dialog for interrupting flows that require user confirmation or input.
Basic usage
Basic usage
This is a basic dialog example.
Controlled visibility
visible is a controlled attribute: the host (button/JS) sets or removes it, and the component never restores it automatically; after closing, listen for oas-ok / oas-cancel and remove visible.
Controlled visibility (visible)
External buttons set / remove visible to control visibility without relying on the footer buttons.
No footer buttons
No footer buttons
The footer action area is hidden; close via ✕ / Esc / mask only.
Disable mask close
Disable mask close
Clicking the mask won't close it; use the buttons or Esc.
Custom width
Custom width
Specify the dialog width via width, supporting pixels or percentages (e.g. 50%); defaults to 520px when unset.
Vertically centered
Vertically centered
By default the dialog is offset toward the top (100px from the top); adding centered centers it vertically.
Draggable
Draggable
Drag the dialog by its title bar; Esc, mask close, and focus behavior stay unchanged.
Fullscreen dialog
fullscreen makes the dialog fill the viewport (no radius, no margin). Precedence: fullscreen wins over width / centered / draggable — width is ignored, centered has no layout effect, dragging is disabled; Esc / mask close, focus trap, and ARIA behavior stay the same.
Fullscreen dialog
The fullscreen dialog fills the viewport without radius or margin. width / centered are ignored and dragging is disabled; Esc / mask close still work.
Imperative confirm
The imperative confirm() API is Promise-based and reuses oas-modal (returns Promise<void>; resolves on OK, rejects on cancel). Pass an async onOk callback for a loading confirmation: clicking OK puts the OK button into loading (spinner, no repeated triggers); on resolve the dialog closes and the outer promise resolves; on reject the loading clears and the dialog stays open for retry or cancel.
Imperative confirm
Event feedback
Event feedback
Click "OK" or "Cancel" and watch the message at the top-right.
API
Attributes
| Attribute | Description | Type | Default |
|---|---|---|---|
centered | Vertically center the dialog | boolean | — |
draggable | Drag the dialog via its header | boolean | — |
fullscreen | Display fullscreen: the dialog fills the viewport without radius or margin (takes precedence over width / centered / draggable) | boolean | — |
loading | Put the OK button into loading state (disabled + spinner), blocking repeated confirms | boolean | — |
no-footer | Hide footer action buttons | boolean | — |
no-mask-close | Disable closing on mask click | boolean | — |
title | Title text | string | — |
visible | Whether shown | boolean | — |
width | Dialog width (px or percentage) | — | — |
Events
| Event | Description |
|---|---|
oas-cancel | Cancel: cancel button / ✕ / mask click / Esc |
oas-ok | Clicked "OK" |
Slots
| Name | Description |
|---|---|
| default | — |
role="dialog" + aria-modal="true"; focus moves to the "Cancel" button on open and is restored on close.