Alert

Alert shares its surface with Notification — the same variant × color axes, 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.

import { Alert } from '@42/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." />

Variants

The same five surfaces as Notification/Badge — light · filled · outline · subtle · default.

<Alert variant="light" color="blue" title="Light" /><Alert variant="filled" color="blue" title="Filled" /><Alert variant="outline" color="blue" title="Outline" /><Alert variant="subtle" color="blue" title="Subtle" /><Alert variant="default" title="Default" />

Anatomy

Composing the parts by hand is for a bespoke body — the same compound parts as Notification (they're literally the same components, so the two families stay pixel-identical):

<Alert.Root variant="outline" 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 an explicit color / variant / 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."/>

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.