Dialog

When to use it

The Dialog component is used to display important information and prompt the user to take an action. It appears as a modal window that overlays the main content.

INFO

Use this component when you want to author the dialog markup yourself. If you prefer a trigger-driven helper that can open existing inline content or embeddable external URLs, use Modal, which now builds on this dialog styling.

TIP

To show the dialog you’ll need to use show() or showModal() in vanilla JavaScript.

Variants

The border-radius can be overridden via inline styling (or similar) by setting --dialog-radius on the dialog element to something else. By default it falls back to --surface-radius.

What it looks like

Code examples

With footer

<dialog class="c-dialog" id="my-dialog">
    <h2 class="c-dialog__title">Title</h2>
    <div class="c-dialog__body">
        <p>Content of the dialog goes here. Content of the dialog goes here. Content of the dialog goes here. Content of the dialog goes here. </p>
        <p>Content of the dialog goes here. Content of the dialog goes here. Content of the dialog goes here. Content of the dialog goes here. </p>
        <p>Content of the dialog goes here. Content of the dialog goes here. Content of the dialog goes here. Content of the dialog goes here. </p>
        <p>Content of the dialog goes here. Content of the dialog goes here. Content of the dialog goes here. Content of the dialog goes here. </p>
    </div>
    <form method="dialog">
        <button class="c-dialog__close" aria-label="Close">✕</button>
    </form>
</dialog>

Example trigger

<script>
document.querySelector('#my-button').addEventListener('click', () => {
    document.querySelector('#my-dialog').showModal();
});
</script>
<button type="button" class="c-button" id="my-button">Open dialog (showModal)</button>

Accessibility notes

Using native dialogs, as this dialog component does, is generally better for both performance and accessibility. Prefer this component when you need precise control over the dialog structure and behavior. See Caniuse for browser support for the <dialog> element.