AlertDialog

Modal confirmation for destructive actions — a native <dialog> with role="alertdialog", opened via command/commandfor.

INSTALL

1pnpm dlx @sayagodev/mo add dialog

Or import the files from the package (no copy):

1import "@sayagodev/mo/css/dialog.css";2import "@sayagodev/mo/js/base.js";

EXAMPLES

Basic

1<button type="button" class="outline" command="show-modal" commandfor="ad-demo">Show Dialog</button>2 3<dialog id="ad-demo" role="alertdialog" aria-labelledby="ad-demo-title">4  <form method="dialog">5    <header>6      <h3 id="ad-demo-title">Are you absolutely sure?</h3>7      <p>This action cannot be undone. This will permanently delete your account from our servers.</p>8    </header>9    <footer>10      <button type="button" class="ghost" value="cancel" command="close" commandfor="ad-demo">Cancel</button>11      <button type="submit" value="continue">Continue</button>12    </footer>13  </form>14</dialog>15

Destructive

1<button type="button" data-variant="danger" command="show-modal" commandfor="ad-destructive">Delete Chat</button>2 3<dialog id="ad-destructive" role="alertdialog" aria-labelledby="ad-destructive-title" style="max-width:24rem;">4  <form method="dialog">5    <header style="align-items:center; text-align:center;">6      <div style="display:inline-flex; width:2.5rem; height:2.5rem; align-items:center; justify-content:center; background:color-mix(in srgb, var(--destructive) 10%, transparent); color:var(--destructive); border-radius:var(--radius-small); margin-bottom:var(--space-2);">7        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h18" /><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" /><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" /></svg>8      </div>9      <h3 id="ad-destructive-title">Delete chat?</h3>10      <p>This will permanently delete this chat conversation. View <a href="#">Settings</a> to delete any memories saved during this chat.</p>11    </header>12    <footer>13      <button type="button" class="outline" value="cancel" command="close" commandfor="ad-destructive">Cancel</button>14      <button type="submit" value="delete" data-variant="danger">Delete</button>15    </footer>16  </form>17</dialog>18

With media

1<button type="button" class="outline" command="show-modal" commandfor="ad-media">Share Project</button>2 3<dialog id="ad-media" role="alertdialog" aria-labelledby="ad-media-title">4  <form method="dialog">5    <header style="align-items:center; text-align:center;">6      <div style="display:inline-flex; width:2.5rem; height:2.5rem; align-items:center; justify-content:center; background:var(--muted); border-radius:var(--radius-small); margin-bottom:var(--space-2);">7        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 5a3 3 0 0 0-5.908 1.177A3 3 0 0 0 8 5a3 3 0 0 0 0 6h8a3 3 0 0 0 0-6Z" /><path d="M12 17a3 3 0 0 0 3-3v-1" /><circle cx="12" cy="12" r="10" /></svg>8      </div>9      <h3 id="ad-media-title">Share this project?</h3>10      <p>Anyone with the link will be able to view and edit this project.</p>11    </header>12    <footer>13      <button type="button" class="ghost" value="cancel" command="close" commandfor="ad-media">Cancel</button>14      <button type="submit" value="share">Share</button>15    </footer>16  </form>17</dialog>18

USAGE

1<button command="show-modal" commandfor="ad1">Delete</button>2 3<dialog id="ad1" role="alertdialog" aria-labelledby="ad1-title">4  <form method="dialog">5    <header>6      <h3 id="ad1-title">Are you absolutely sure?</h3>7      <p>This action cannot be undone.</p>8    </header>9    <footer>10      <button type="button" class="ghost" value="cancel" command="close" commandfor="ad1">Cancel</button>11      <button type="submit" value="confirm">Continue</button>12    </footer>13  </form>14</dialog>

API

NAMEKINDDESCRIPTION

role="alertdialog"attributeOn <dialog> — announces interruption semantics to AT

aria-labelledbyattributePoints at the title heading id

commandfor / commandattributeDeclarative open/close (Safari polyfilled); Esc closes natively

method="dialog"attributeButtons close and set returnValue (cancel · delete)

> header > div (media)elementIcon box composed inline: muted or destructive-tinted square

FILES

src/css/dialog.csssrc/js/base.js

Install:mo add dialog

THEMING · PLAYGROUND

This is the exact component from the examples above, wearing a completely different theme. Edit the tokens and --mo-* hooks in the editor — autocomplete knows them all — and the preview obeys in real time. Your CSS always wins.

Global tokens

--border--card--muted--muted-foreground--radius

Component hooks

--mo-dialog-max-width--mo-dialog-radius

Preview

Your CSS

Try it: type --mo- for the component hooks, or edit any value — the preview obeys in real time.