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

This component is meant to supercede the Modal component, which relies on a third party JS library called Lity.

TIP

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

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 do, is better for both performance and accessibility. If possible, use this component instead of Modal in your application. The one exception being if really old browser support is needed (see Caniuse for browser support for the <dialog> element).