alert-dialog
Use alert dialog parts for destructive or confirmation flows that need a clear action and cancel target.
<section>
<button commandfor="delete-dialog" command="show-modal">
Delete project
</button>
<dialog id="delete-dialog" role="alertdialog" closedby="closerequest">
<h2>Delete project?</h2>
</dialog>
</section>
Example
View source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>AngularCSS Alert Dialog</title>
<link rel="stylesheet" href="../../css/preflight.css" />
<link rel="stylesheet" href="../../css/angular.css" />
<link rel="stylesheet" href="../example.css" />
<script src="../../js/angular-ts.umd.js"></script>
<script src="../../js/angular-css.umd.js"></script>
</head>
<body
ng-app="angular.css"
ng-cloak
data-example="alert-dialog-basic alert-dialog-demo"
>
<section id="confirmation-dialog" class="visual-example">
<button
type="button"
commandfor="confirmation-dialog-content"
command="show-modal"
variant="outline"
>
Show Dialog
</button>
<dialog
role="alertdialog"
id="confirmation-dialog-content"
closedby="closerequest"
aria-labelledby="confirmation-dialog-title"
aria-describedby="confirmation-dialog-description"
size="default"
>
<header>
<h2 id="confirmation-dialog-title">Are you absolutely sure?</h2>
<p id="confirmation-dialog-description">
This action cannot be undone. This will permanently delete your
account from our servers.
</p>
</header>
<footer>
<button
type="button"
commandfor="confirmation-dialog-content"
command="close"
variant="outline"
>
Cancel
</button>
<button
type="button"
commandfor="confirmation-dialog-content"
command="close"
>
Continue
</button>
</footer>
</dialog>
</section>
</body>
</html>
Sizes And Composition
View source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>AngularCSS Alert Dialog Workflows</title>
<link rel="stylesheet" href="../../css/preflight.css" />
<link rel="stylesheet" href="../../css/angular.css" />
<link rel="stylesheet" href="../example.css" />
<script src="../../js/angular-ts.umd.js"></script>
<script src="../../js/angular-css.umd.js"></script>
</head>
<body
ng-app="angular.css"
ng-cloak
ng-init="chatDeleted=false"
data-example="alert-dialog-destructive alert-dialog-media alert-dialog-rtl alert-dialog-small alert-dialog-small-media"
>
<main class="alert-dialog-workflows">
<div class="alert-dialog-trigger-grid" aria-label="Alert dialog examples">
<section id="share-project-dialog">
<button
type="button"
variant="outline"
commandfor="share-project-dialog-content"
command="show-modal"
>
Share Project
</button>
<dialog
role="alertdialog"
size="default"
id="share-project-dialog-content"
closedby="closerequest"
aria-labelledby="share-project-dialog-title"
aria-describedby="share-project-dialog-description"
>
<header>
<figure aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none">
<circle
cx="12"
cy="12"
r="9"
stroke="currentColor"
stroke-width="2"
/>
<path
d="M12 8v8M8 12h8"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
/>
</svg>
</figure>
<h2 id="share-project-dialog-title">Share this project?</h2>
<p id="share-project-dialog-description">
Anyone with the link will be able to view and edit this project.
</p>
</header>
<footer>
<button
type="button"
variant="outline"
commandfor="share-project-dialog-content"
command="close"
>
Cancel
</button>
<button
type="button"
commandfor="share-project-dialog-content"
command="close"
>
Share
</button>
</footer>
</dialog>
</section>
<section id="accessory-dialog">
<button
type="button"
variant="outline"
commandfor="accessory-dialog-content"
command="show-modal"
>
Show Small Dialog
</button>
<dialog
role="alertdialog"
size="sm"
id="accessory-dialog-content"
closedby="closerequest"
aria-labelledby="accessory-dialog-title"
aria-describedby="accessory-dialog-description"
>
<header>
<h2 id="accessory-dialog-title">Allow accessory to connect?</h2>
<p id="accessory-dialog-description">
Do you want to allow the USB accessory to connect to this
device?
</p>
</header>
<footer>
<button
type="button"
variant="outline"
commandfor="accessory-dialog-content"
command="close"
>
Don't allow
</button>
<button
type="button"
commandfor="accessory-dialog-content"
command="close"
>
Allow
</button>
</footer>
</dialog>
</section>
<section id="accessory-media-dialog">
<button
type="button"
variant="outline"
commandfor="accessory-media-dialog-content"
command="show-modal"
>
Show Small Dialog With Media
</button>
<dialog
role="alertdialog"
size="sm"
id="accessory-media-dialog-content"
closedby="closerequest"
aria-labelledby="accessory-media-dialog-title"
aria-describedby="accessory-media-dialog-description"
>
<header>
<figure aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none">
<path
d="m7 7 10 10-5 5V2l5 5L7 17"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</figure>
<h2 id="accessory-media-dialog-title">
Allow accessory to connect?
</h2>
<p id="accessory-media-dialog-description">
Do you want to allow the USB accessory to connect to this
device?
</p>
</header>
<footer>
<button
type="button"
variant="outline"
commandfor="accessory-media-dialog-content"
command="close"
>
Don't allow
</button>
<button
type="button"
commandfor="accessory-media-dialog-content"
command="close"
>
Allow
</button>
</footer>
</dialog>
</section>
<section id="delete-chat-dialog">
<button
type="button"
variant="destructive"
commandfor="delete-chat-dialog-content"
command="show-modal"
>
Delete Chat
</button>
<dialog
role="alertdialog"
size="sm"
id="delete-chat-dialog-content"
closedby="closerequest"
aria-labelledby="delete-chat-dialog-title"
aria-describedby="delete-chat-dialog-description"
>
<header>
<figure class="alert-dialog-media-destructive" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none">
<path
d="M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6M10 11v5M14 11v5"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</figure>
<h2 id="delete-chat-dialog-title">Delete chat?</h2>
<p id="delete-chat-dialog-description">
This will permanently delete this chat conversation. View
<a href="#settings">Settings</a> to delete saved memories.
</p>
</header>
<footer>
<button
type="button"
variant="outline"
commandfor="delete-chat-dialog-content"
command="close"
>
Cancel
</button>
<button
type="button"
variant="destructive"
ng-click="chatDeleted=true"
commandfor="delete-chat-dialog-content"
command="close"
>
Delete
</button>
</footer>
</dialog>
</section>
<div class="alert-dialog-rtl-triggers" dir="rtl" lang="ar">
<section id="rtl-confirmation-dialog">
<button
type="button"
variant="outline"
commandfor="rtl-confirmation-dialog-content"
command="show-modal"
>
إظهار الحوار
</button>
<dialog
role="alertdialog"
size="default"
id="rtl-confirmation-dialog-content"
closedby="closerequest"
aria-labelledby="rtl-confirmation-dialog-title"
aria-describedby="rtl-confirmation-dialog-description"
>
<header>
<h2 id="rtl-confirmation-dialog-title">هل أنت متأكد تمامًا؟</h2>
<p id="rtl-confirmation-dialog-description">
لا يمكن التراجع عن هذا الإجراء. سيؤدي هذا إلى حذف حسابك
نهائيًا من خوادمنا.
</p>
</header>
<footer>
<button
type="button"
variant="outline"
commandfor="rtl-confirmation-dialog-content"
command="close"
>
إلغاء
</button>
<button
type="button"
commandfor="rtl-confirmation-dialog-content"
command="close"
>
متابعة
</button>
</footer>
</dialog>
</section>
<section id="rtl-accessory-dialog">
<button
type="button"
variant="outline"
commandfor="rtl-accessory-dialog-content"
command="show-modal"
>
إظهار الحوار (صغير)
</button>
<dialog
role="alertdialog"
size="sm"
id="rtl-accessory-dialog-content"
closedby="closerequest"
aria-labelledby="rtl-accessory-dialog-title"
aria-describedby="rtl-accessory-dialog-description"
>
<header>
<figure aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none">
<path
d="m7 7 10 10-5 5V2l5 5L7 17"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</figure>
<h2 id="rtl-accessory-dialog-title">السماح للملحق بالاتصال؟</h2>
<p id="rtl-accessory-dialog-description">
هل تريد السماح لملحق USB بالاتصال بهذا الجهاز؟
</p>
</header>
<footer>
<button
type="button"
variant="outline"
commandfor="rtl-accessory-dialog-content"
command="close"
>
عدم السماح
</button>
<button
type="button"
commandfor="rtl-accessory-dialog-content"
command="close"
>
السماح
</button>
</footer>
</dialog>
</section>
</div>
</div>
<output class="output">
Chat: {{ chatDeleted ? 'deleted' : 'available' }}
</output>
</main>
</body>
</html>
Installation
Load the AngularCSS stylesheet. This entry needs no AngularCSS JavaScript or angular.css module dependency. Add AngularTS when using application bindings such as ng-model or ng-click. See Installation for the complete setup.
This entry uses native HTML and CSS. AngularCSS registers no runtime directive for it. A native dialog configured for decisions.
Anatomy
Root styling selector
dialog[role="alertdialog"]
Semantic structure
Use a native dialog with role="alertdialog" beside its invoker button. Close controls use command=close; semantic headers, figures, and footers need no anatomy classes or nested AngularCSS attributes.
API
Attributes and state
| Attribute | Access | Purpose |
|---|---|---|
role | Authored | Explicit semantic role when native HTML does not provide one. |
size | Authored | Compact action layout: sm; omit for the default dialog layout. |
Attributes remain authored HTML, native state, or AngularTS inputs. AngularCSS does not write element state.
CSS custom properties
This styling hook does not define component-specific CSS custom properties.
DOM events
This component does not emit a component-specific custom event.
Native DOM events continue to work normally. AngularTS event directives such as
ng-click and ng-keydown, plus the data-change model callback, remain application-owned.
Behavior
A native dialog opened with command=show-modal owns top-layer rendering, modal focus, Escape, background isolation, and trigger focus restoration. Use closedby=closerequest when pointer light-dismiss must be disabled. AngularCSS registers no alert-dialog directive.
AngularCSS does not replace AngularTS interpolation, bindings, structural directives, form controllers, validation, or application state.
Accessibility
Connect the native dialog to a concise title and consequence description with aria-labelledby and aria-describedby. Put the least destructive action first in focus order and use closedby=closerequest when outside dismissal would be unsafe.
Authored accessible names and relationships are preserved. Test the final composition with keyboard navigation and assistive technology because labels and content come from the application.
Customization
Target semantic elements, native state selectors, and component classes with ordinary CSS. Behavior and accessible state remain with native HTML and AngularTS; visual choices belong in the application stylesheet.
Read Customization for layer order, design tokens, state variants, and iframe demo isolation.
Feedback
Was this page helpful?
Glad to hear it! Please tell us how we can improve.
Sorry to hear that. Please tell us how we can improve.