# Notification (/docs/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**](/docs/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](/docs/notifier) for the moving parts).

## Anatomy [#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`](/docs/collapse).

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

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`*&#x2A; / &#x2A;*`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](/docs/testing).

## Surfaces [#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:

<Preview align="center" code="&#x22;<Notification type=\&#x22;info\&#x22; title=\&#x22;info\&#x22; />\n<Notification type=\&#x22;success\&#x22; title=\&#x22;success\&#x22; />\n<Notification type=\&#x22;warning\&#x22; title=\&#x22;warning\&#x22; />\n<Notification type=\&#x22;error\&#x22; title=\&#x22;error\&#x22; />\n<Notification color=\&#x22;purple\&#x22; icon={<Info />} title=\&#x22;purple\&#x22; />&#x22;">
  <SurfaceMatrix />
</Preview>

<Alert type="info" className="my-4" description="<>The grab cursor and swipe-to-dismiss belong to the toaster, not the card: they're applied by the Notifier's render body, so a standalone <code>Notification.Root</code> stays a plain surface.</>" />

## Ready-made card [#ready-made-card]

Composing the parts by hand is for bespoke bodies. For the common case, the bare &#x2A;*`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](/docs/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`](/docs/collapse). Leave it uncontrolled with `defaultOpen`, or drive it with `open` / `onOpenChange`.

<Preview align="center" code="&#x22;<Notification\n  withCollapse\n  withCloseButton={false}\n  defaultOpen\n  type=\&#x22;success\&#x22;\n  title=\&#x22;Profile updated\&#x22;\n  description=\&#x22;Your changes are live across all 42 campuses.\&#x22;\n  action={<Notification.ActionTrigger>Undo</Notification.ActionTrigger>}\n/>&#x22;">
  <CollapsibleCard />
</Preview>

<TypeTable
  type="{
  type: { type: '&#x22;success&#x22; | &#x22;error&#x22; | &#x22;warning&#x22; | &#x22;info&#x22; | &#x22;loading&#x22;', description: 'Status preset — maps to a hue + a default leading icon. Omit for a neutral card. Exclusive with color.' },
  color: { type: 'Color', description: 'Custom hue for a card with no type. Exclusive with type (a type error if both are passed).' },
  title: { type: 'ReactNode', description: 'The header row content.' },
  description: { type: 'ReactNode', description: 'Secondary line, revealed with a Collapse.' },
  action: { type: 'ReactNode', description: 'Action row (e.g. an ActionTrigger), revealed independently of the description.' },
  icon: { type: 'ReactNode | null', description: 'Override the leading glyph; null hides it.' },
  withCollapse: { type: 'boolean', default: 'false', description: 'Swap the close button for a chevron that folds the description and action rows. Ignored while withCloseButton (which takes precedence) is set.' },
  defaultOpen: { type: 'boolean', description: 'Uncontrolled initial state. Defaults collapsed when withCollapse, open otherwise.' },
  open: { type: 'boolean', description: 'Controlled open state; pair with onOpenChange.' },
  onOpenChange: { type: '(open: boolean) => void', description: 'Fired when the collapse toggle is pressed.' },
  withCloseButton: { type: 'boolean', default: 'true', description: 'Render the close (×) button; onClose fires when pressed.' },
  translations: {
    type: '{ closeTriggerLabel?: string; collapseLabel?: string; expandLabel?: string }',
    description: &#x22;Accessible names of the close button (default \&#x22;Dismiss\&#x22;) and the collapse chevron (\&#x22;Collapse\&#x22; while open, \&#x22;Expand\&#x22; while folded). A partial override keeps the other defaults. The compound CloseTrigger / CollapseTrigger parts take a plain aria-label instead.&#x22;,
  },
}"
/>

## API [#api]

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

<TypeTable
  type="{
  color: { type: 'Color', description: 'Accent palette; drives the --c-* slot vars for the whole card.' },
  asChild: { type: 'boolean', default: 'false', description: 'Render children as the root element (Ark UI polymorphism).' },
  testId: { type: 'string', description: 'Renders as `data-testid` on the root element — works the same whether set via `Notification.Root` or the top-level `Notification` shorthand, since the two render the same node. See [Testing](/docs/testing).' },
}"
/>

To spawn these toasts imperatively — status presets, promises, updates, placement and stacking — see the [**Notifier**](/docs/notifier).