Alert

A non-interactive status banner with an optional title. Uses role="alert" so screen readers announce it immediately when it appears.

Add via CLI

npx @a2ra/cli add alert

Variants

Example JSON

{
  "type": "Alert",
  "props": {
    "variant": "success",
    "title": "Payment received"
  },
  "children": "Your order has been confirmed."
}

Props

Prop	Type	Description
variant	info default success warning error	Color scheme and semantic meaning
title	string	Bold heading rendered above the body
children	string node[]	Body content

Notes

• The element carries role="alert", which triggers an ARIA live-region announcement on mount. Only render it when the message is genuinely new information; avoid re-rendering the same alert on every tick.
• Choose the variant that matches the semantic meaning, not just the desired colour.