Components / Base / Dialog
B9 · Base
Dialog
A native modal dialog with a title, a short body, and a close button.
<button type="button" class="btn sm">Archive DOC-1042</button>
<dialog class="c-dialog">
<h3>Archive this example record</h3>
<button type="button">Close</button>
</dialog>
The single-file button copies a document with the stylesheet and script inlined.
When to use
- A step needs a decision before the page continues.
- The content is short.
When not to use
- The notice can sit inline. Use a toast.
- The content is a full view. Use a page.
Usage
<button type="button" class="btn sm">Archive DOC-1042</button>
<dialog class="c-dialog">
<h3>Archive this example record</h3>
<button type="button">Close</button>
</dialog>
Variants
The preview shows the form used in the gallery.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| dialog | element | — | Opened with showModal. |
| aria-labelledby | id | — | Points at the heading. |
| data-close-dialog | button | — | Calls close. |
Keyboard
| Key | Action |
|---|---|
| Enter | On the opener, shows the dialog. |
| Escape | Closes the native dialog. |
| Tab | Cycles inside the dialog while it is open. |
Accessibility
- showModal provides the focus trap and the backdrop.
- The heading names the dialog.
- Close is a button.
Motion
- The dialog opens without a scale animation.
Pattern origin
Base overlay. Native dialog, no shadow.