Dialog overlay using the native <dialog> element. Elevated panel with shadow-md, frosted backdrop, focus-trap, and Escape-to-close. Three sizes.
A compact confirmation or alert. Max width 400px.
| Prop | Type | Default | Description |
|---|---|---|---|
id | string | — | Required for JS open/close |
title | string | — | Dialog heading (aria-labelledby) |
open | boolean | false | SSR open state |
size | 'sm'|'md'|'lg' | 'md' | Panel max-width (400/560/760px) |
class | string | — | Extra CSS on the panel |
Slots: (default) body content · footer action buttons row.
JS: document.getElementById('id').showModal() / .close(). Escape key + backdrop click close it automatically.