Components / Alert

Alert

A compositional status message with explicit polite or assertive announcement behavior.

Changes saved

Your project is up to date.

example.component.html

html

<aevko-alert>
  <strong aevkoAlertTitle>
    Saved
  </strong>
  <span aevkoAlertDescription>
    Your changes are available.
  </span>
</aevko-alert>

Installation

npx aevko-ui@latest add alert --yes

Source ownership

Customization

Compose title, description and an optional visual, then select announcement urgency independently from visual emphasis.

Edit locallyThe installed template and stylesheet are application code, not a black box.

Theme semanticallyOverride --aevko-* tokens or ordinary classes without !important.

Compose freelySlots accept native elements, SVG, images or Angular components.

API reference

Property or slot	Type	Default	Description
`variant`	`'default' \| 'muted' \| 'danger'`	`'default'`	Visual emphasis of the message.
`live`	`'polite' \| 'assertive'`	`'polite'`	Chooses status or alert announcement semantics.
`aevkoAlertTitle`	`projected slot`	`empty`	Concise message heading.
`aevkoAlertDescription`	`projected slot`	`empty`	Supporting message detail.
`aevkoAlertIcon`	`projected slot`	`empty`	Decorative leading visual.

Accessibility contract

Accessibility

Included behavior

Polite messages use role status; assertive messages use role alert.

Your responsibility

Use assertive announcements only for urgent dynamic changes and keep the message concise enough to understand immediately.

Back to all components