Alert

An inline, persistent message in one of four tones that helps people recover from a problem or continue with context.

When to use

• Page- or section-level conditions that stay true until resolved: a failing webhook, a quota near its limit, scheduled maintenance.
• Confirmations that should remain visible on the page (a verified domain).
• Not for brief confirmation of a background action: use Toast or ToastStack. Not for site-wide campaigns: use AnnouncementBar.

Usage

import { Alert } from "@/components/iris/alert/alert";

h(
  Alert,
  { tone: "warning", title: "4 sessions are waiting for review", onDismiss: () => snooze() },
  "The oldest has waited 2 h. Open the review queue to decide.",
);

Props

Prop	Type	Default	Description
title	string	—	Required. The headline; a changed title cross-fades in place.
children	ReactNode	—	Supporting text or links.
tone	"info" | "success" | "warning" | "danger"	"info"	Sets the icon and colour.
open	boolean	—	Controls presence; hiding collapses the height and fades it out.
onDismiss	() => void	—	Shows a dismiss button. Uncontrolled alerts collapse first, then call it; controlled ones should set open to false.
…div props			className, id, aria-*.

Notes

• danger renders with role="alert" (announced immediately); other tones use role="status". The dismiss button is labelled "Dismiss: {title}".
• Changing tone or copy morphs the icon, text, and height on a spring; reduced motion swaps instantly.
• Reads --surface, --hover, --line, --ink, --ink-2, --ink-3, --shadow-resting, and the tone tokens --accent, --green, --orange, --red.