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

templateEngineOverride, layout, title, description, toc

templateEngineOverride	layout	title	description	toc
njk	layouts/page.njk	Alert Dialog	A modal dialog that interrupts the user with important content and expects a response.	label id children Usage usage label id HTML usage-html label id Jinja and Nunjucks 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 %} Cancel Continue {% 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) }}

Usage

HTML

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).

{{ code_block(code_html | prettyHtml) }}

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).

Use Nunjucks or Jinja macros {% lucide "arrow-right" %} Jinja macro {% lucide "arrow-right" %} Nunjucks macro {% lucide "arrow-right" %}

{% set raw_code %}{% raw %}{% set footer %} Cancel Continue {% 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") }}