alert
Use section[role="alert"] for important feedback blocks. The default presentation is
neutral; add variant="destructive" for destructive feedback or override the
AngularCSS color tokens for application-specific colors.
<section role="alert">
<svg aria-hidden="true"><!-- optional icon --></svg>
<h2>Saved!</h2>
<p>Your profile was updated.</p>
<div>
<button ng-click="dismiss()">Dismiss</button>
</div>
</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</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-demo">
<div class="visual-example">
<section aria-live="assertive" aria-atomic="true" role="alert">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="10"></circle>
<path d="M9 12l2 2 4-4"></path>
</svg>
<h2>Payment successful</h2>
<p>
Your payment of $29.99 has been processed. A receipt has been sent to
your email address.
</p>
</section>
<section aria-live="assertive" aria-atomic="true" role="alert">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="10"></circle>
<path d="M12 16v-4" />
<path d="M12 8h.01" />
</svg>
<h2>New feature available</h2>
<p>
We've added dark mode support. You can enable it in your account
settings.
</p>
</section>
</div>
</body>
</html>
Variants 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 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="darkModeEnabled=false"
data-example="alert-action alert-basic alert-colors alert-destructive alert-rtl"
>
<main class="alert-workflow-grid">
<section role="alert">
<svg aria-hidden="true" viewBox="0 0 24 24" fill="none">
<circle
cx="12"
cy="12"
r="10"
stroke="currentColor"
stroke-width="2"
/>
<path
d="m9 12 2 2 4-4"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
<h2>Account updated successfully</h2>
<p>
Your profile information has been saved. Changes will be reflected
immediately.
</p>
</section>
<section aria-live="polite" role="alert">
<h2>Dark mode is now available</h2>
<p>Enable it under your profile settings to get started.</p>
<button
size="xs"
type="button"
ng-click="darkModeEnabled=true"
ng-disabled="darkModeEnabled"
>
{{ darkModeEnabled ? 'Enabled' : 'Enable' }}
</button>
</section>
<section variant="warning" role="alert">
<svg aria-hidden="true" viewBox="0 0 24 24" fill="none">
<path
d="M10.3 2.9 1.8 17a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 2.9a2 2 0 0 0-3.4 0Z"
stroke="currentColor"
stroke-width="2"
stroke-linejoin="round"
/>
<path
d="M12 9v4M12 17h.01"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
/>
</svg>
<h2>Your subscription will expire in 3 days.</h2>
<p>
Renew now to avoid service interruption or upgrade to a paid plan.
</p>
</section>
<section variant="destructive" role="alert">
<svg aria-hidden="true" viewBox="0 0 24 24" fill="none">
<circle
cx="12"
cy="12"
r="10"
stroke="currentColor"
stroke-width="2"
/>
<path
d="M12 8v4M12 16h.01"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
/>
</svg>
<h2>Payment failed</h2>
<p>
Your payment could not be processed. Check your payment method and try
again.
</p>
</section>
<section
class="alert-rtl-demo"
dir="rtl"
lang="ar"
aria-label="التنبيهات"
>
<section role="alert">
<svg aria-hidden="true" viewBox="0 0 24 24" fill="none">
<circle
cx="12"
cy="12"
r="10"
stroke="currentColor"
stroke-width="2"
/>
<path
d="m9 12 2 2 4-4"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
<h2>تم الدفع بنجاح</h2>
<p>تمت معالجة دفعتك وإرسال إيصال إلى عنوان بريدك الإلكتروني.</p>
</section>
<section role="alert">
<svg aria-hidden="true" viewBox="0 0 24 24" fill="none">
<circle
cx="12"
cy="12"
r="10"
stroke="currentColor"
stroke-width="2"
/>
<path
d="M12 16v-4M12 8h.01"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
/>
</svg>
<h2>ميزة جديدة متاحة</h2>
<p>لقد أضفنا دعم الوضع الداكن ويمكنك تفعيله في إعدادات حسابك.</p>
</section>
</section>
<output class="output alert-workflow-output">
Dark mode: {{ darkModeEnabled ? 'enabled' : 'disabled' }}
</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. Semantic authored status content.
Anatomy
Root styling selector
[role="alert"]
Semantic structure
Use semantic HTML with the root styling selector above. Native elements provide the structure; the stylesheet supplies presentation.
API
Attributes and state
| Attribute | Access | Purpose |
|---|---|---|
aria-atomic | Authored | Whether an assistive technology announces the entire updated region. |
aria-live | Authored | Announcement priority for updates to a live region. |
role | Authored | Explicit semantic role when native HTML does not provide one. |
variant | Authored | Status presentation: info, success, warning, or destructive; omit for the default presentation. |
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
Semantic authored status content. AngularCSS supplies styling without a runtime directive. Native HTML owns platform behavior; AngularTS owns application values, commands, and authored state.
AngularCSS does not replace AngularTS interpolation, bindings, structural directives, form controllers, validation, or application state.
Accessibility
Use the appropriate live-region or status semantics for dynamic feedback. Decorative feedback must stay hidden from assistive technology.
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.