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.

The surface reuses Badge's two orthogonal axes: variant (the shape, owned by a cva) × color (the palette, a data-color attribute resolved to the --c-* slot vars). 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; the Description and the action row sit below, each revealed independently with a Collapse.

<Notification.Root variant="outline" 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 variant × 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.

Surfaces

variant picks the shape — light · filled · outline · subtle · default — and color the palette. When a toast is spawned with a status (success / error / …), the Notifier maps that status onto a hue and a default leading icon; here are the raw surfaces at one hue:

<Notification.Root variant="filled" color="blue">…</Notification.Root>// light · filled · outline · subtle · default

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 an explicit color / variant / 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.