Docs / Components
SenseAlertComponent
Inline alert banner from @artificialsenselabs/ui for status, warnings, and contextual feedback. Severity drives colour tokens and live-region semantics.
Live demo: run nx serve showcase and open /components/alert (port 4202).
Overview
Category: Layout / data display. Selector: sense-alert. Import: import { SenseAlertComponent } from '@artificialsenselabs/ui';
<sense-alert severity="warning" [dismissible]="true" (dismissed)="onClose()">
Your session will expire in 5 minutes.
</sense-alert>API
Generated from libs/ui/src/lib/alert/sense-alert.component.ts — run pnpm run docs:api to refresh.
| Input | Type | Default | Description |
|---|---|---|---|
severity | SenseAlertSeverity | 'info' | Semantic severity — controls icon glyph and colour treatment. |
variant | SenseSurfaceVariant | 'filled' | Surface treatment within the severity palette (ADR-0030). |
dismissible | boolean | false | When true, renders a dismiss button that emits `dismissed` (and the deprecated `closed`). |
closabledeprecated | boolean | false | Alias for . Setting either one shows the button: the two are OR-ed, the same rule as `sense-dialog`'s `dismissibleMask` / `dismissableMask`, so no 0.x consumer loses a button. Deprecated: Use `dismissible` — removed in 1.0 (ADR-0056 D4). |
dismissLabel | string | null | null | Accessible name for the dismiss button. Falls back to the i18n key `alert.dismiss`. |
| Output | Type | Description |
|---|---|---|
dismissed | void | Emitted when the user activates the dismiss control. Caller removes the alert from the DOM and restores focus. |
closed | void | Alias for ; fires once per dismiss, right after `dismissed`. |
Accessibility
Pattern: WAI-ARIA APG — Alert
- Host sets
aria-atomic="true"so screen readers announce the full message on update. - Severity icon is decorative (
aria-hidden="true"). - Dismiss control is a native
<button type="button">with an accessible name. - Unit tests run axe-core (Layer 2); Playwright smoke in
apps/showcase-e2e(Layer 3).