Modal

Open in Figma View all renders

The Modal is a dialog component used to present information or guide users through micro journeys. A Modal should always include either a title bar or an action bar to provide a clear way for users to dismiss it. In this example, the open attribute is used to control visibility, but this approach should be avoided in real-world implementations. Instead, use the showModal() and close() methods to trigger proper modal behavior. Always ensure there is a clearly labeled dismiss button or element to close the modal in an accessible and user-friendly manner. 

<dialog class="modal" open>
    <div class="modal__content">
        <h2 class="heading heading--bold">Modal Heading</h2>
        <p class="copy">This is some content</p>
    </div>
    <div>Optional content slot</div>
    <div class="action-bar">
        <h2 class="action-bar__heading heading heading--bold heading--small">Action Heading</h2>
        <button class="btn btn--small btn--secondary">No</button>
        <button class="btn btn--small">Yes, Delete Claim</button>
    </div>
    <button class="modal__dismiss" aria-label="Dismiss">
        <span class="material-symbols-rounded">close</span>
    </button>
</dialog>

Variations and modifiers

Modal - Not shown dismiss button

<dialog class="modal" open>
    <div class="modal__content">
        <h2 class="heading heading--bold">Modal Heading</h2>
        <p class="copy">This is some content</p>
    </div>
    <div>Optional content slot</div>
    <div class="action-bar">
        <h2 class="action-bar__heading heading heading--bold heading--small">Action Heading</h2>
        <button class="btn btn--small btn--secondary">No</button>
        <button class="btn btn--small">Yes, Delete Claim</button>
    </div> 
</dialog>

Modal - No Action bar

<dialog class="modal" open>
    <div class="modal__content">
        <h2 class="heading heading--bold">Modal Heading</h2>
        <p class="copy">This is some content</p>
    </div>
    <button class="modal__dismiss" aria-label="Dismiss">
        <span class="material-symbols-rounded">close</span>
    </button>
</dialog>

Modal - Action bar (Left Aligned)

<dialog class="modal" open>
    <div class="modal__content">
        <h2 class="heading heading--bold">Modal Heading</h2>
        <p class="copy">This is some content</p>
    </div>
    <div class="action-bar action-bar--left-aligned">
        <h2 class="action-bar__heading heading heading--bold heading--small">Action Heading</h2>
        <button class="btn btn--small btn--secondary">No</button>
        <button class="btn btn--small">Yes, Delete Claim</button>
    </div> 
    <button class="modal__dismiss" aria-label="Dismiss">
        <span class="material-symbols-rounded">close</span>
    </button>
</dialog>