Alert

• Type: Component (feedback)
• Access: Free, open source
• Page: https://ui.xzero.co.uk/components/alert
• Markdown: https://ui.xzero.co.uk/components/alert/markdown
• Registry item: https://mcp.xzero.co.uk/r/alert.json
• Source file: registry/components/alert/alert.tsx
• Dependencies: motion, lucide-react
• Keywords: status, message, react alert, alert banner, inline notification, warning message, animated alert, dismissible alert, callout

When to use

• Persistent, in-flow messages about a page or form, such as an expiring card.
• Status that changes over time, where one alert should morph between tones.
• Dismissible notices that should collapse and close the gap below them.

When not to use

• Use toast or toast-stack for transient results of an action.
• Use empty-state when there is no content to show.
• Use dialog when people must respond before continuing.

Installation

Register both Xzero UI namespaces in your project's components.json:

{
  "registries": {
    "@xzero-ui": "https://mcp.xzero.co.uk/r/{name}.json",
    "@xzero-ui-pro": "https://mcp.xzero.co.uk/r/pro/{name}.json"
  }
}

npx shadcn@4.23.0 add @xzero-ui/alert

Install xzero-foundation once, and import @/components/xzero/foundation.css in your app root. No Xzero token is used by this snapshot. For sample portraits, photos, fonts, or logos, download https://mcp.xzero.co.uk/install-assets.mjs and run node xzero-install-assets.mjs <receiving-project>.

Usage

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

export function BillingNotice() {
  return (
    <Alert tone="warning" title="Card expires soon" onDismiss={() => track("dismissed")}>
      Update your payment method before March 1 to avoid interruption.
    </Alert>
  );
}

API reference

Alert

An inline message with a tone icon, title, and optional details that morph when they change.

Prop	Type	Default	Description
title (required)	string	–	Headline. A new title rises in over the old one.
tone	"info" | "success" | "warning" | "danger"	"info"	Colour and icon. Danger uses role="alert"; the rest use role="status".
children	ReactNode	–	Details under the title. String children crossfade when they change.
open	boolean	–	Controls presence. Hiding collapses the height and fades it out.
onDismiss	() => void	–	Shows a dismiss button. Uncontrolled alerts collapse first, then call this.
...props	HTMLAttributes<HTMLDivElement>	–	Forwarded to the alert element, such as className and id.

Keyboard interactions

Keys	Action
Enter / Space	Activates the dismiss button when present.

Accessibility

• Danger alerts use role="alert" and interrupt; other tones use role="status" and announce politely.
• Outgoing copies are aria-hidden while they fade, so the live region reads only the current text.
• The dismiss button is labelled "Dismiss: <title>"; the tone icon is aria-hidden.

Motion

• Presence collapses or expands the height on a smooth spring with a fade, so content below closes the gap.
• Tone changes morph the icon through a small scale and blur; copy changes rise in while the height springs to fit.
• Reduced motion swaps content with short fades and no height animation.

Responsive behavior

• The alert fills its container and the copy wraps; the icon and dismiss button keep fixed sizes.
• Hover styles on the dismiss button apply only on hover-capable fine pointers.

Performance

• A ResizeObserver lets the height spring when copy changes; keep only a few alerts mounted per page.

Notes for AI

• Use for persistent, in-flow messages tied to a page or form. Use toast or toast-stack for transient results of an action.
• Keep one Alert mounted and change tone, title, and children to morph between states instead of swapping components.

Related

• Toast: Brief confirmation for a completed background action.
• Toast stack: Stack short results at the edge until you reach for them.
• Empty state: A useful next step when there is nothing to show yet.

Also in messages

• Announcement bar: A top banner that rotates messages, counts down, and collapses smoothly when dismissed.
• Cookie consent: A consent bar that morphs into preferences and folds into a reopen button.
• Undo toast: Archive or delete rows with a second chance: the gap closes, a countdown toast merges repeat actions, and Undo or ⌘Z puts every row back exactly where it was.

Guidance for AI tools

Alert: A persistent message that helps people recover or continue. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://ui.xzero.co.uk/llms.txt