Components
Dialog
Native dialog modals driven by the Invoker Commands API, with no JavaScript to wire up.
Dialogs use a native <dialog class="dialog">. Open one from any button with
command="show-modal" and commandfor="<id>", and close with command="close". Add
closedby="any" for light-dismiss. Size with data-size.
Default
Loading components…
<button class="button" type="button" command="show-modal" commandfor="dialog-example-1"> Dialog <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"> <rect width="256" height="256" fill="none" /> <line x1="64" y1="192" x2="192" y2="64" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" /> <polyline points="88 64 192 64 192 168" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" /> </svg></button><dialog id="dialog-example-1" class="dialog" closedby="any"> <div class="dialog__content"> <header class="dialog__header"> <h2 class="text-lg font-heading font-strong">Dialog title</h2> <p class="text-muted-foreground"> This dialog was opened using an <a href="https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API" target="_blank" class="text-link" >invoker command</a >. </p> </header> <div class="dialog__body"> <p>Set the size of the dialog with the <code>data-size</code> attribute.</p> </div> <footer class="dialog__footer"> <button class="button" type="button" commandfor="dialog-example-1" command="close"> Cancel </button> <button class="button" data-variant="primary" commandfor="dialog-example-1" command="close"> Accept </button> </footer> </div> <button class="button dialog__close" data-size="icon" data-variant="ghost" type="button" commandfor="dialog-example-1" command="close" > <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"> <rect width="256" height="256" fill="none" /> <line x1="200" y1="56" x2="56" y2="200" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" /> <line x1="200" y1="200" x2="56" y2="56" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" /> </svg> </button></dialog>With a form
Loading components…
<button class="button" type="button" command="show-modal" commandfor="form-dialog-1"> New project <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"> <rect width="256" height="256" fill="none" /> <line x1="40" y1="128" x2="216" y2="128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" /> <line x1="128" y1="40" x2="128" y2="216" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" /> </svg></button><dialog id="form-dialog-1" class="dialog" closedby="any" data-size="article"> <div class="dialog__content"> <header class="dialog__header"> <h2 class="text-lg font-heading font-strong">New project</h2> <p class="text-muted-foreground"> Add a project to your workspace. You can change these settings later. </p> </header> <form id="f-new-project-1" class="dialog__body flex flex-col gap-md" method="dialog"> <fieldset class="field-group"> <legend class="sr-only">Contact</legend> <div class="grid grid-cols-2 gap-sm"> <div class="field"> <label class="field__label" for="fd-name">Name</label> <input class="input" id="fd-name" name="name" type="text" inputmode="text" placeholder="Ada Lovelace" required /> </div> <div class="field"> <label class="field__label" for="fd-email">Email</label> <input class="input" id="fd-email" name="email" type="email" inputmode="email" required placeholder="you@example.com" autocomplete="email" aria-describedby="fd-email-hint" /> <div class="field__description"> <span class="field__hint" id="fd-email-hint" >We'll only use this to send receipts.</span > <span class="field__error" role="alert">Please enter a valid email address.</span> </div> </div> <label class="field-group col-span-2"> <span class="field__label">Repository</span> <div class="input-group"> <input class="input" type="search" name="repo" id="fd-repo" inputmode="search" placeholder="Search repositories…" /> <span class="input-group__addon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"> <rect width="256" height="256" fill="none" /> <circle cx="112" cy="112" r="80" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" /> <line x1="168.57" y1="168.57" x2="224" y2="224" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" /> </svg> </span> </div> </label> </div> </fieldset> <fieldset class="field-group"> <div class="field"> <label class="field__label" for="fd-message">Description</label> <textarea class="textarea" id="fd-message" name="description" inputmode="text" placeholder="What is this project for?" ></textarea> </div> </fieldset> <fieldset class="radio-group"> <legend>Billing</legend> <label class="field" data-orientation="horizontal"> <input class="radio" type="radio" name="billing" value="monthly" /> <span class="field__label">Monthly billing</span> </label> <label class="field" data-orientation="horizontal"> <input class="radio" type="radio" name="billing" value="annual" checked /> <span class="field__label">Annual billing</span> </label> </fieldset> <label class="field" data-orientation="horizontal"> <input type="checkbox" name="terms" required /> <span class="field__label">Accept terms & conditions</span> </label> </form> <footer class="dialog__footer"> <button class="button" type="button" value="cancel" commandfor="form-dialog-1" command="close" > Cancel </button> <button class="button" data-variant="primary" type="submit" form="f-new-project-1" value="save" > Create project </button> </footer> <button class="button dialog__close" data-size="icon" data-variant="ghost" type="button" commandfor="form-dialog-1" command="close" aria-label="Close dialog" > <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"> <rect width="256" height="256" fill="none" /> <line x1="200" y1="56" x2="56" y2="200" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" /> <line x1="200" y1="200" x2="56" y2="56" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" /> </svg> </button> </div></dialog>Alert
Loading components…
<button class="button" type="button" data-variant="destructive" command="show-modal" commandfor="alert-dialog-example-1"> Delete account</button><dialog id="alert-dialog-example-1" class="dialog" closedby="none"> <div class="dialog__content"> <header class="dialog__header flex-row items-center gap-xs text-destructive"> <svg class="size-md" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"> <rect width="256" height="256" fill="none" /> <path fill="currentColor" d="M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM120,104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm8,88a12,12,0,1,1,12-12A12,12,0,0,1,128,192Z" /> </svg> <h2 class="text-lg font-heading font-strong">Are you absolutely sure?</h2> </header> <div class="dialog__body italic"> <p> Alert dialogs must be closed by clicking the Cancel or Continue buttons. Changing <code>closedby="none"</code> to <code>closedby="any"</code> allows the user to close the dialog by clicking outside the dialog or pressing the Escape key. </p> </div> </div> <footer class="dialog__footer"> <button class="button" type="button" commandfor="alert-dialog-example-1" command="close"> Cancel </button> <button class="button" data-variant="destructive" type="button" commandfor="alert-dialog-example-1" command="close" > Delete account </button> </footer></dialog>API
| Attribute | Where | Values |
|---|---|---|
command | trigger | show-modal, close |
commandfor | trigger | id of the <dialog> |
data-size | .dialog | article, container, screen |
closedby | <dialog> | any, closerequest, none |