Inline Message for Angular

import { AuiInlineMessage } from '@absoluteui/angular/inline-message';

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

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

Example

import { Component } from '@angular/core';
import { AuiInlineMessage } from '@absoluteui/angular/inline-message';

@Component({
  selector: 'app-save-state',
  imports: [AuiInlineMessage],
  template: `<aui-inline-message live="polite" [tone]="saved ? 'success' : 'info'" [message]="saved ? 'Saved' : 'Saving'"></aui-inline-message>`,
})
export class SaveStateComponent {
  saved = false;
}

<aui-inline-message>

Class AuiInlineMessage; template reference #ref="auiInlineMessage".

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

Inputs

Input	Type	Default	Description
message	string		Required. Message text.
tone	InlineMessageTone	'info'	Tone: icon, colors, and hidden tone prefix.
live	InlineMessageLive	'off'	off: static; polite: role=status; assertive: role=alert.
icons	Partial<InlineMessageIcons>		Icon slot overrides.
locale	string	'en-US'	Locale of the tone prefix.