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.
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 | — |
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.