basecoat/docs/src/components/alert-dialog.njk

---
layout: layouts/page.njk
title: Alert Dialog
description: A modal dialog that interrupts the user with important content and expects a response.
toc:
  - label: Usage
    id: usage
    children:
      - label: HTML
        id: usage-html
      - label: Jinja and Nunjucks
        id: usage-macro
---

{% from "macros/code_preview.njk" import code_preview %}
{% from "macros/code_block.njk" import code_block %}
{% from "dialog.njk" import dialog %}

{% set code_html %}
{% set 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>
{% endset %}
{{ dialog(
  id="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
) }}
{% endset %}

{{ code_preview("alert-dialog", code_html | prettyHtml) }}

<h2 id="usage"><a href="#usage">Usage</a></h2>

<h3 id="usage-default"><a href="#usage-html">HTML</a></h3>

<section class="prose">
  <p>The Alert Dialog component is identical to <a href="/components/dialog" class="font-medium underline underline-offset-4">Dialog</a> 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 <code>onclick</code> attribute on the <code>&lt;dialog&gt;</code> or the <code>&lt;article&gt;</code> elements).</p>
</section>

{{ code_block(code_html | prettyHtml, class="") }}

<section class="prose">
  <p>The component has the following HTML structure:</p>
  <dl>
    <dt><code class="highlight language-html">&lt;button type="button"&gt;</code> <span class="badge-secondary">Optional</span></dt>
    <dd>The trigger button to open the alert dialog (using <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal" target="_blank">the native <code>showModal()</code> method</a>).</dd>
    <dt><code class="highlight language-html">&lt;dialog class="dialog" id="{ DIALOG_ID }"&gt;</code></dt>
    <dd>Wraps the whole component and acts as the backdrop. It can also have the following attributes:
      <ul>
        <li><code>aria-labelledby="{ TITLE_ID }"</code>: linked to by the <code>aria-labelledby</code> attribute of the dialog.</li>
        <li><code>aria-describedby="{ DESCRIPTION_ID }"</code>: linked to by the <code>aria-describedby</code> attribute of the <code>&lt;dialog&gt;</code>.</li>
      </ul>
      <dl>
        <dt><code class="highlight language-html">&lt;article&gt;</code></dt>
        <dd>Wraps the content of the alert dialog.
          <dl>
            <dt><code class="highlight language-html">&lt;header&gt;</code></dt>
            <dd>Contains the header for the alert dialog:
              <dl>
                <dt><code class="highlight language-html">&lt;h2&gt;</code></dt>
                <dd>The title of the alert dialog, must have an <code>id</code> if you use the <code>aria-labelledby</code> attribute on the <code>&lt;dialog&gt;</code>.</dd>
                <dt><code class="highlight language-html">&lt;p&gt;</code> <span class="badge-secondary">Optional</span></dt>
                <dd>The description of the alert dialog, must have an <code>id</code> if you use the <code>aria-describedby</code> attribute on the <code>&lt;dialog&gt;</code>.</dd>
              </dl>
            </dd>
            <dt><code class="highlight language-html">&lt;section&gt;</code> <span class="badge-secondary">Optional</span></dt>
            <dd>For the content.</dd>
            <dt><code class="highlight language-html">&lt;footer&gt;</code> <span class="badge-secondary">Optional</span></dt>
            <dd>Usually contains actions.</dd>
          </dl>
        </dd>
      </dl>
    </dd>
  </dl>
</section>

<h3 id="usage-macro"><a href="#usage-macro">Jinja and Nunjucks</a></h3>

<div class="prose">
  <p>You can use the <code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-xs">dialog()</code> Nunjucks or Jinja macro for this component. Make sure to set <code>close_on_overlay_click</code> and <code>close_button</code> to <code>False</code> (or <code>false</code> for Nunjucks).</p>
</div>

<div class="flex flex-wrap gap-2 my-6">
  <a class="badge-outline" href="/installation/#install-macros" target="_blank">
    Use Nunjucks or Jinja macros
    {% lucide "arrow-right" %}
  </a>
  <a class="badge-outline" href="https://github.com/hunvreus/basecoat/blob/main/src/jinja/dialog.html.jinja" target="_blank">
    Jinja macro
    {% lucide "arrow-right" %}
  </a>
  <a class="badge-outline" href="https://github.com/hunvreus/basecoat/blob/main/src/nunjucks/dialog.njk" target="_blank">
    Nunjucks macro
    {% lucide "arrow-right" %}
  </a>
</div>

{% set raw_code %}{% raw %}{% 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
) }}{% endraw %}
{% endset%}
{{ code_block(raw_code, "jinja") }}