<dialog>

The <dialog> element represents a modal or non-modal dialog.

See more about using <dialog> as a modal in the Modal composite documentation.

Make sure: To include aria-labelledby and aria-describedby attributes pointing to the modal's title and content for better accessibility.

Basic Usage

<div style="min-height: 200px;">
<dialog id="dialog-basic" open="true" aria-labelledby="modal-title" aria-describedby="modal-description">
  <h3 id="modal-title">&#x1F4C5; Thank You for Registering!</h3>
  
  <article id="modal-description">
    <p>
      We're excited to have you join us for our
      upcoming event. Please arrive at the museum
      on time to check in and get started.
    </p>
  
    <ul>
      <li>Date: Saturday, April 15</li>
      <li>Time: 10:00am - 12:00pm</li>
    </ul>
  </article>
</dialog>
</div>

With Close Button

Add a Close Button with the utility class .float-end to position it on the right side of the dialog.

Note: In case you are using the no-utilities bundle, .float-end won't be avaible, in which case using a <header>, as seen in the next section, is a good alternative to position the close button on the right side of the dialog.

<div style="min-height: 150px;">
<dialog id="dialog-close-button" open="true" aria-labelledby="modal-title" aria-describedby="modal-description">
  <button aria-label="Close" commandfor="dialog-close-button" class="icon-close float-end" command="close"></button>
  
  <h3 id="modal-title">&#x1F4C5; Thank You for Registering!</h3>
  
  <br>
  
  <article id="modal-description">
    <p>
      We're excited to have you join us for our
      upcoming event.
    </p>
  </article>
</dialog>
</div>

With Header and Footer

Note: Inside <dialog>, the <header> will justify its content to the left and right and <footer> will justify its content to the right, allowing you to add a close button or other actions, without needing to use utility classes.

<div style="min-height: 275px;">
<dialog id="dialog-basic" open="true" aria-labelledby="modal-title" aria-describedby="modal-description">
  <header>
    <h2 id="modal-title">Confirm Your Membership</h2>
    <button aria-label="Close" class="icon-close align-self-start" commandfor="dialog-basic" command="close"></button>
  </header>
  
  <article id="modal-description">
    <p>
      Thank you for signing up for a membership!
      Please review the membership details below:
    </p>
  
    <ul>
      <li>Membership: Individual</li>
      <li>Price: $10</li>
    </ul>
  </article>
  
  <footer>
    <button class="secondary" commandfor="dialog-basic" command="close">
      Cancel
    </button>
    <button commandfor="dialog-basic" command="close">Confirm</button>
  </footer>
</dialog>
</div>