Alert for Angular

import { AuiAlert } from '@absoluteui/angular/alert';

Styles are included with the component. Behavior, keyboard and screen-reader support, design tokens, and limitations are described on the Alert page; this page covers the Angular API.

Defaults for every instance: provideAbsoluteUIConfig({ components: { alert: { ... } } }) (see Configuration).

Example

import { Component } from '@angular/core';
import { AuiAlert } from '@absoluteui/angular/alert';

@Component({
  selector: 'app-save-status',
  imports: [AuiAlert],
  template: `<aui-alert tone="error" live="assertive" title="Could not save" [message]="message" [dismissible]="true" [actions]="actions" (action)="onAction($event.value)"></aui-alert>`,
})
export class SaveStatusComponent {
  readonly message = 'Check your connection and try again.';
  readonly actions = [{ label: 'Retry', value: 'retry' }];
  onAction(value: string): void {
    if (value === 'retry') {
      // retry the save
    }
  }
}

<aui-alert>

Class AuiAlert; template reference #ref="auiAlert".

Server rendering: Renders on the server; the browser re-creates it after hydration.

Inputs

Input	Type	Default	Description
message	string | Node		Message; strings render as text.
tone	AlertTone	'info'	Tone: icon, colors, and hidden tone prefix.
title	string		Optional title (text).
live	AlertLive	'off'	off: static; polite: role=status; assertive: role=alert. Announces content inserted or changed after load.
actions	readonly AlertAction[]		Buttons { label, value, variant? } that emit aui-action.
icons	Partial<AlertIcons>		Icon slot overrides.
dismissible	boolean	false	Render a dismiss button (localized ‘Dismiss’).
locale	string	'en-US'	Locale of the tone prefix and dismiss label.

Outputs

Output	Payload	Description
(action)	AlertActionDetail	An action button was activated. Re-emits aui-action.
(dismissed)	AlertDismissDetail	Before the alert hides; preventDefault keeps it visible. Re-emits aui-dismiss.

Read-only state

Property	Type	Description
isDismissed	Signal<boolean>	Whether the alert was dismissed (hidden).

Methods

Call them through a viewChild query or a template reference.

Method	Description
dismiss(): boolean | undefined	Emit cancelable aui-dismiss, then hide unless prevented. Returns whether it was dismissed.