Notification

Notification is the kit's toast card — the visual surface for transient, non-blocking feedback. You rarely render it directly: you spawn toasts imperatively through the Notifier (notify.success('Saved')), and its region renders a Notification for each live toast. This page documents the card itself — its compound parts and its styling axes — for the times you compose a custom toast body.

There is a single surface, an outline, and one styling axis: color (the palette, a data-color attribute resolved to the --c-* slot vars) tints its border, text and icon. Enter/exit and the height animations are driven by CSS (see the Notifier for the moving parts).

Anatomy

A toast body is a small compound. The header row holds the leading Icon, the Title, and the CloseTrigger (or, for a foldable card, the CollapseTrigger); the Description and the action row sit below, each revealed independently with a Collapse.

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

The parts:

• Notification.Root — the card. Takes a color; forwards everything else to a div (and supports asChild).
• Notification.Icon — leading-glyph slot; inherits the card's text color and sizes any child svg to match.
• Notification.Title / Notification.Description — the heading and the secondary line.
• Notification.ActionTrigger — a styled inline button for the action row (any node works; this is just the kit's button styling).
• Notification.CloseTrigger — the dismiss (×) button; renders a default icon unless you pass children.
• Notification.CollapseTrigger — the collapse chevron, CloseTrigger's counterpart; takes a required open that drives its label, aria-expanded and the chevron's rotation, and leaves the state itself to you. Renders a default chevron unless you pass children.

Every part above takes its own testId, rendered as data-testid on its own element — see Testing.

Surfaces

Every card is the same outline; only color changes. A status type maps onto a hue and a default leading icon — info is neutral, success green, warning orange, error red. Anything else is a custom color on the same surface. type and color are mutually exclusive — passing both is a type error:

<Notification type="info" title="info" />
<Notification type="success" title="success" />
<Notification type="warning" title="warning" />
<Notification type="error" title="error" />
<Notification color="purple" icon={<Info />} title="purple" />

Ready-made card

Composing the parts by hand is for bespoke bodies. For the common case, the bare Notification builds the whole card from props — a type or a color (never both), an optional icon, a title, and optional description and action. It's the same object shape the Notifier spawns, exported so you can drop a status card straight into a page — no notifier, no store.

It can also trade its close (×) button for a collapse toggle: set withCollapse and turn off withCloseButton (which takes precedence). A chevron then folds the description and action rows away, each animating its own height with a Collapse. Leave it uncontrolled with defaultOpen, or drive it with open / onOpenChange.

<Notification
  withCollapse
  withCloseButton={false}
  defaultOpen
  type="success"
  title="Profile updated"
  description="Your changes are live across all 42 campuses."
  action={<Notification.ActionTrigger>Undo</Notification.ActionTrigger>}
/>

API

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

To spawn these toasts imperatively — status presets, promises, updates, placement and stacking — see the Notifier.

Changelog