Inline Message

FeedbackSince 0.2.0

import { InlineMessage } from '@absoluteui/components/inline-message';
import '@absoluteui/components/inline-message/style.css';

Using Angular? See Inline Message for Angular.

What it does

A compact, one-line status shown next to the content it describes, such as “Saved 2 minutes ago” or “Offline”. InlineMessage renders a tone icon, a visually hidden localized tone prefix (“Warning:”), and the text. Tone is never conveyed by color alone. It is static by default; set live for status that changes while the user works.

When to use

• Short status beside a heading, toolbar, card, or value: save state, connection state, sync state.
• Status that changes while the user works, with live set to ‘polite’.

When not to use

• Messages that need a title, actions, or dismissal: use Alert.
• Transient confirmations: use Toast.
• Field validation errors: use the field’s own error message or Validation Message.

Examples

Save state next to a document title

import { InlineMessage } from '@absoluteui/components/inline-message';

const host = document.createElement('span');
document.body.append(host);
const status = InlineMessage.create(host, { tone: 'info', message: 'Saving', live: 'polite' });
status.update({ tone: 'success', message: 'Saved just now' });

Connection state

import { InlineMessage } from '@absoluteui/components/inline-message';

const host = document.createElement('span');
document.body.append(host);
const connection = InlineMessage.create(host, { tone: 'success', message: 'Online', live: 'polite' });
window.addEventListener('offline', () => {
  connection.update({ tone: 'warning', message: 'Offline' });
});
window.addEventListener('online', () => {
  connection.update({ tone: 'success', message: 'Online' });
});

Usage

import { InlineMessage } from '@absoluteui/components/inline-message';
import '@absoluteui/components/inline-message/style.css';

const host = document.querySelector<HTMLElement>('#connection');
if (host) {
  const connection = InlineMessage.create(host, { tone: 'success', message: 'Online', live: 'polite' });
  window.addEventListener('offline', () => {
    connection.update({ tone: 'warning', message: 'Offline' });
  });
}

More usage

import { InlineMessage } from '@absoluteui/components/inline-message';

const host = document.querySelector<HTMLElement>('#save-state');
if (host) {
  const state = InlineMessage.create(host, { tone: 'info', message: 'Saving', live: 'polite' });
  state.update({ tone: 'success', message: 'Saved just now' });
}

Anatomy

<span class="aui-inline-message aui-inline-message--{tone}" [role=status|alert]>
  <span class="aui-inline-message__icon">icon (aria-hidden)</span>
  <span class="aui-inline-message__tone">Warning: (visually hidden)</span>
  <span class="aui-inline-message__text">message</span>
</span>

API reference

Factory

InlineMessage.create(host: HTMLElement, options: InlineMessageOptions): InlineMessage

Global configuration key: inlineMessage (see Configuration).

Options

Option	Type	Default	Description
message	string		Message text. Required.
tone	'info' | 'success' | 'warning' | 'error'	"info"	Tone: icon, colors, and hidden tone prefix.
live	'off' | 'polite' | 'assertive'	"off"	off: static; polite: role=status; assertive: role=alert.
icons	Partial<InlineMessageIcons>		Icon slot overrides.
locale	string	"en-US"	Locale of the tone prefix. Globally configurable. Inherited from common configuration.

Properties

Property	Type	Description
host	HTMLElement	The host element (receives role and classes).
message	string	Current message.
options	Readonly<InlineMessageOptions>	Current options.

Methods

Method	Description
update(options: Partial<InlineMessageOptions>): void	Merge and apply options; text changes in place (announced when live).
destroy(): void	Remove rendering, role, classes, and subscriptions.

CSS classes

All rules live in the aui.components cascade layer, so application styles override them without specificity battles.

Class	Purpose
aui-inline-message	Host.
aui-inline-message--info | --success | --warning | --error	Tone modifiers.
aui-inline-message__icon	Tone icon (decorative).
aui-inline-message__tone	Visually hidden tone prefix.
aui-inline-message__text	Message text.

Icon slots

Slot	Default icon
info	info
success	check-circle
warning	alert-triangle
error	alert-circle

Design tokens

Tokens this stylesheet reads (verified in CI). Override them in a theme or with the Theme Designer.

--aui-border-width | --aui-color-error-fg | --aui-color-error-subtle | --aui-color-info-fg | --aui-color-info-subtle | --aui-color-success-fg | --aui-color-success-subtle | --aui-color-text | --aui-color-warning-fg | --aui-color-warning-subtle | --aui-font-family-sans | --aui-font-size-sm | --aui-icon-size-sm | --aui-line-height-normal | --aui-radius-pill | --aui-space-1 | --aui-space-2

TypeScript definitions

type InlineMessageTone = 'info' | 'success' | 'warning' | 'error';
type InlineMessageLive = 'off' | 'polite' | 'assertive';
interface InlineMessageIcons { info: IconRef; success: IconRef; warning: IconRef; error: IconRef }
interface InlineMessageOptions {
  message: string;
  tone?: InlineMessageTone;
  live?: InlineMessageLive;
  locale?: string;
  icons?: Partial<InlineMessageIcons>;
}

Accessibility

Pattern: Status message (WCAG 4.1.3): role=status for polite updates, role=alert for urgent ones, plain text when static.

Keyboard

Key	Context	Action
None	Any	Not focusable; read in document order by assistive technology.

Roles

Element	Role
host	none (live ‘off’), status (live ‘polite’), or alert (live ‘assertive’)
icon	none (aria-hidden=true)

ARIA attributes

Attribute	Element	Value
role	host	status or alert when live is enabled; absent otherwise

Focus

Never receives or moves focus.

WCAG 2.2 success criteria addressed

Criterion	Level	Note
1.3.1 Info and Relationships	A
1.4.1 Use of Color	A
1.4.3 Contrast (Minimum)	AA
1.4.11 Non-text Contrast	AA
4.1.3 Status Messages	AA

Automated test results: Accessibility and compliance.

Notes and known caveats

• Tone is conveyed by an icon and a visually hidden, localized prefix such as ‘Error:’, never by color alone.
• Live roles announce only changes made after the region exists; create it with live set, then call update().
• Manual screen-reader verification (NVDA, JAWS, VoiceOver) is pending.

Behavior

States

info, success, warning, error; live polite; live assertive.

State transitions

From	Trigger	To
any	update({ tone, message })	new tone and text (announced when live)
any	destroy()	host restored to empty

Accessibility notes

• Live roles only announce changes made after the live region exists. Create the message with live set, then change it with update().
• Do not update a live message on every keystroke or timer tick. For example, refresh “Saved 2 minutes ago” without live, and use live only for state changes such as Saving -> Saved.
• The e2e axe run (WCAG 2.2 AA, 3 themes) and manual screen-reader verification are pending.

Responsive behavior

An inline-flex pill, limited to the container width; long text wraps.

Right-to-left

Logical properties: the icon sits at the inline start.

Theming

color-{tone}-subtle background, color-{tone}-fg icon, and color-text text; these pairs are in the contrast gate. Forced-colors mode adds a CanvasText border and icon.

Global configuration

Only the inherited locale is configurable:

configureAbsoluteUI({ components: { inlineMessage: { locale: 'de-DE' } } });

Component configuration

The instance locale overrides global and theme configuration. Configuration changes re-render existing messages.

Timezones

Not applicable. Relative times such as “Saved 2 minutes ago” are formatted by the consumer.

Icons

icons.info (default info), icons.success (check-circle), icons.warning (alert-triangle), icons.error (alert-circle).

Security

The message uses textContent; it is never parsed as HTML. CSP-safe.

Data handling

No persistence, network access, or telemetry.

Performance

Constant work per render: one icon and two text updates.

Supported data scale

Not data-driven.

Edge cases

• Changing only tone re-announces a live message, because the tone prefix is part of the content.
• Setting live on a message that is already displayed does not announce the existing text.

Errors

Code	Category	Cause
INLINE_MESSAGE_OPTIONS	configuration	Missing or blank message, or unknown tone or live value.
ICON_UNKNOWN	configuration	Unknown icon override.
CFG_INVALID_VALUE / CFG_UNKNOWN_OPTION	configuration	Invalid or unknown configuration.

Invalid options throw before the host is modified; an invalid update() leaves the previous state intact.

Known limitations

• Text only.
• Manual screen-reader verification is pending.

Unsupported scenarios

• HTML or Node content.
• Actions or dismissal: use Alert.