Message

New

Clear feedback, right where it matters. Inline messages for updates, guidance and form validation.

Six severitiesThree variantsAccessible feedback

Basic

Info: your workspace is up to date.

Severity

Use words and icons alongside color to communicate the meaning.

success: an example inline message.

info: an example inline message.

warn: an example inline message.

error: an example inline message.

secondary: an example inline message.

contrast: an example inline message.

Outlined and simple

success: outlined message.

success: simple message.

info: outlined message.

info: simple message.

warn: outlined message.

warn: simple message.

error: outlined message.

error: simple message.

secondary: outlined message.

secondary: simple message.

contrast: outlined message.

contrast: simple message.

Sizes

Info: sm message.

Info: md message.

Info: lg message.

Custom content

Your team is ready.
Invite a colleague to start collaborating.

Forms

Submit an empty name to see the error. This example does not send data.

Usage and API

import { AvMessage } from 'avero-ui';

<av-message severity="success">Success: changes saved.</av-message>
<av-message severity="error" variant="simple" avSize="sm">
  Error: username is required.
</av-message>
<av-message severity="info">
  <ng-template #icon><span>★</span></ng-template>
  You can provide your own content and icon.
</av-message>

Inputs: severity (info by default), variant (filled, outlined, simple), avSize (sm, md, lg), text, icon (application CSS class), and messageRole (alert, status, none). Project content or supply text; #icon overrides the icon class and default symbol.

Errors default to role="alert"; other messages use role="status". Use messageRole="none" for static examples or when a parent already announces updates. Icons are decorative. Keep meaningful labels in the text and connect validation messages to their fields with aria-describedby.

Theme with --av-message-color, --av-message-background, --av-message-border and --av-message-radius. Check contrast when overriding colors.