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. |
dismissible | boolean | false | When true, renders a dismiss button that emits `dismissed`. |
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. The caller is responsible for removing the alert from the DOM. |
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).