Alert

Variants

SYNC ACTIVE

Pulling latest telemetry from node-07.

UPLINK ESTABLISHED

Handshake complete in 240ms.

DEGRADED SIGNAL

Packet loss exceeds 8% on the backup channel.

LINK LOST

Telemetry stream dropped.

Without a title

Description-only alert renders the icon and body without a heading.

Dismissible

MAINTENANCE WINDOW

Scheduled maintenance begins at 0200Z.

Activating Dismiss calls onDismiss, and the application removes the alert, Dismiss included. Keyboard focus was on that button, so move it to the next logical control: the one that restores or replaces the alert, as in the example, or the control the alert was about. Otherwise focus falls to the page.

Props

PROP	TYPE	DEFAULT	REQUIRED
`variant` Severity. Drives icon, accent color, and ARIA role (error/warning = alert, info/success = status).	`enum` info \| success \| warning \| error	—	yes
`title` Optional uppercase heading shown above the description.	`string`	—	no
`dismissible` Render a trailing Dismiss button that calls onDismiss.	`boolean`	`false`	no
`onDismiss` Called when the Dismiss button is activated.	`function`	—	no

Accessibility

error and warning use assertive role="alert"; info and success use polite role="status".
A polite status region that is inserted together with its text may not be announced. To announce a change in an info or success alert, keep the Alert on the page and replace its children; for a transient confirmation use Toast, which writes its announcement into a live region only after that region is on the page.
A long title or message wraps inside the alert, and Dismiss stays inside it.
Icons and titles convey severity alongside color.
The “Dismiss” button supports Enter/Space and a visible focus ring.

Manifest entry

<Alert variant="error" title="LINK LOST">Telemetry stream dropped.</Alert>

View agent manifest

{
  "description": "Inline status message with a severity icon, semantic left-edge accent, optional title, and optional dismiss control.",
  "props": {
    "variant": {
      "type": "enum",
      "values": [
        "info",
        "success",
        "warning",
        "error"
      ],
      "required": true,
      "description": "Severity. Drives icon, accent color, and ARIA role (error/warning = alert, info/success = status)."
    },
    "title": {
      "type": "string",
      "description": "Optional uppercase heading shown above the description."
    },
    "dismissible": {
      "type": "boolean",
      "default": false,
      "description": "Render a trailing Dismiss button that calls onDismiss."
    },
    "onDismiss": {
      "type": "function",
      "description": "Called when the Dismiss button is activated."
    }
  },
  "slots": {
    "children": {
      "type": "any",
      "required": false
    }
  },
  "composable_with": [
    "Card",
    "CardBody"
  ],
  "never_inside": [
    "Alert",
    "Button",
    "Badge"
  ],
  "example": "<Alert variant=\"error\" title=\"LINK LOST\">Telemetry stream dropped.</Alert>"
}