Alert Dialog | Basecoat

<button type="button" onclick="document.getElementById('alert-dialog').showModal()" class="btn-outline">Open alert dialog</button> <dialog id="alert-dialog" class="dialog" aria-labelledby="alert-dialog-title" aria-describedby="alert-dialog-description"> <article> <header> <h2 id="alert-dialog-title">Are you absolutely sure?</h2> <p id="alert-dialog-description">This action cannot be undone. This will permanently delete your account and remove your data from our servers.</p> </header> <footer> <button class="btn-outline" onclick="document.getElementById('alert-dialog').close()">Cancel</button> <button class="btn-primary" onclick="document.getElementById('alert-dialog').close()">Continue</button> </footer> </article> </dialog>

Usage

The Alert Dialog component is identical to Dialog except for two small differences: we do not display a close button and we do not let the user close the dialog when clicking on the backdrop (no onclick attribute on the <dialog> or the <article> elements).

<button type="button" onclick="document.getElementById('alert-dialog').showModal()" class="btn-outline">Open alert dialog</button>

<dialog id="alert-dialog" class="dialog" aria-labelledby="alert-dialog-title" aria-describedby="alert-dialog-description">
  <article>
    <header>
      <h2 id="alert-dialog-title">Are you absolutely sure?</h2>
      <p id="alert-dialog-description">This action cannot be undone. This will permanently delete your account and remove your data from our servers.</p>
    </header>

    <footer>
      <button class="btn-outline" onclick="document.getElementById('alert-dialog').close()">Cancel</button>
      <button class="btn-primary" onclick="document.getElementById('alert-dialog').close()">Continue</button>
    </footer>
  </article>
</dialog>

The component has the following HTML structure:

<button type="button"> Optional

The trigger button to open the alert dialog (using the native showModal() method).

<dialog class="dialog" id="{ DIALOG_ID }">

Wraps the whole component and acts as the backdrop. It can also have the following attributes:

aria-labelledby="{ TITLE_ID }": linked to by the aria-labelledby attribute of the dialog.
aria-describedby="{ DESCRIPTION_ID }": linked to by the aria-describedby attribute of the <dialog>.

<article>

Wraps the content of the alert dialog.

<header>

Contains the header for the alert dialog:

<h2>: The title of the alert dialog, must have an id if you use the aria-labelledby attribute on the <dialog>.
<p> Optional: The description of the alert dialog, must have an id if you use the aria-describedby attribute on the <dialog>.

<section> Optional

For the content.

<footer> Optional

Usually contains actions.

Jinja and Nunjucks

You can use the dialog() Nunjucks or Jinja macro for this component. Make sure to set close_on_overlay_click and close_button to False (or false for Nunjucks).

{% set footer %}
  <button class="btn-outline" onclick="document.getElementById('demo-alert-dialog').close()">Cancel</button>
  <button class="btn-primary" onclick="document.getElementById('demo-alert-dialog').close()">Continue</button>
{% endset %}
{{ dialog(
  id="demo-alert-dialog",
  title="Are you absolutely sure?",
  description="This action cannot be undone. This will permanently delete your account and remove your data from our servers.",
  trigger="Open Alert Dialog",
  trigger_attrs={"class": "btn-outline"},
  footer=footer,
  close_button=False,
  close_on_overlay_click=False
) }}