Alert

Alert has the look of Notification — the same type presets, the same Icon / Title / Description / ActionTrigger / CloseTrigger parts — but it's full-width, un-animated, and static by default (withCloseButton={false}). Reach for it when the content should just sit in the page rather than float above it and self-dismiss.

The surface is where the two differ. A toast floats over arbitrary content, so it keeps an opaque, blurred panel. An alert lives on the page, so it's translucent: a faint wash of its color across the whole card and a translucent edge in the same hue. It blends into whatever it sits on, and the status reads from the whole card, not just its outline.

Alert's root takes a testId, and — since these parts are literally re-exported from Notification — so does every one of Alert.Icon / Alert.Title / Alert.Description / Alert.ActionTrigger / Alert.CloseTrigger, each landing on its own rendered element. See Testing.

import { Alert } from '@42-central/ui-react/alert';

<Alert type="warning" title="Breaking change" description="Update your imports." />

Playground

<Component
  type="info"
  title="New version available"
  description="A new release is ready — refresh to pick it up."
/>

Full prop browser

Types

Four status presets — the same hues and icons as Notification, minus the toast-only loading.

<Alert type="info" title="Info" description="A neutral status preset." />
<Alert type="success" title="Success" description="Your changes are live." />
<Alert type="warning" title="Warning" description="Double-check before continuing." />
<Alert type="error" title="Error" description="Something went wrong." />

Custom colors

There is one surface — a wash and an edge tinted by color — so a look outside the four presets is just another hue. Pass color (and your own icon, or none) instead of a type. The two are mutually exclusive: passing both is a type error, since type already sets the hue.

<Alert color="blue" title="Blue" description="Any palette color works." />
<Alert color="purple" title="Purple" description="No type, so no default icon." />

Anatomy

Composing the parts by hand is for a bespoke body — the same compound parts as Notification (they're literally the same components; only the root surface differs):

<Alert.Root color="green">
  <div className="flex flex-row gap-3">
    <Alert.Icon><CircleCheck /></Alert.Icon>
    <Alert.Title>Profile updated</Alert.Title>
    <Alert.CloseTrigger />
  </div>
  <Alert.Description>Your changes are live across all 42 campuses.</Alert.Description>
  <div className="mt-2 flex flex-wrap items-center gap-2">
    <Alert.ActionTrigger>Undo</Alert.ActionTrigger>
  </div>
</Alert.Root>

Ready-made card

For the common case, the bare Alert builds the whole card from props — a type or a color (never both), an optional icon, a title, and optional description and action. Unlike Notification, it renders with no close button by default; pass withCloseButton to opt in.

<Alert
  type="warning"
  withCloseButton
  title="Breaking change"
  description="Two breaking changes this release — see the changelog."
/>

As a link

When the whole card leads somewhere (release notes, the record it reports on), make it a link with asChild: pass your router's link as the only child, and the card renders as that link, with its icon, title, description and action inside. Keep withCloseButton and interactive actions off a linked card, since a button can't sit inside a link.

<Alert
  asChild
  type="info"
  title="A new release is out"
  description="See what changed in the changelog."
>
  <Link href="/docs/changelog" />
</Alert>

API

Alert.Root — the card surface (the compound primitive). Accepts every div/Ark prop (asChild, id, style, …) plus:

Accessibility

Alert doesn't manage focus or announce itself — it's meant for content that's already present when the page loads, not something that needs to grab attention. If you mount one dynamically in response to a user action (e.g. a form validation error), add your own role="alert" (or wrap it in a live region) — Alert.Root forwards arbitrary props straight through to the underlying div.

To spawn floating, self-dismissing toasts instead, see Notification and the Notifier.

Changelog