# Notifier (/docs/notifier)
The **Notifier** is the imperative toast manager. You **create one**, mount its region **once** near the app root, then call `notify.*` from anywhere — an event handler, a data mutation, a background task — with no `useState` or JSX at the call site. Each live toast is rendered as a [`Notification`](/docs/notification) card.
It's a custom toaster modelled on the kit's [`createOverlays`](/docs/overlays): a framework-agnostic store + a once-mounted renderer + a bound controller. [Ark UI's Presence](https://ark-ui.com/) drives each toast's enter/exit lifecycle; everything else — the queue, the timers, placement, the deck↔column stacking, hover-pause, swipe-to-dismiss — is the kit's own, with the display and animation pushed into CSS (so heights animate, and it all respects `prefers-reduced-motion`).
## Setup [#setup]
`createNotifier(options)` returns a bound `notify` object and a `` renderer. Call it once in a `"use client"` module and re-export the pieces:
```tsx title="app/notifier.ts"
'use client';
import { createNotifier } from '@42-central/ui-react/notification';
export const { notify, Notifications } = createNotifier({ placement: 'bottom-end' });
```
Mount `` once near the root. It renders nothing until a toast opens and is SSR-inert, so it's safe at the top of the tree:
```tsx title="app/layout.tsx"
import { Notifications } from './notifier';
export default function Layout({ children }) {
return (
{children}
);
}
```
Then call `notify` from anywhere:
```tsx
import { notify } from '@/app/notifier';
notify('Copied to clipboard'); // neutral toast
notify.success('Saved');
```
## Status presets [#status-presets]
Five presets — `success`, `error`, `warning`, `info`, `loading` — each maps to a hue (green / red / orange / neutral / neutral) and a default leading icon (`loading` shows a spinner and never auto-dismisses). Pass a bare string for the title, or an options object for more.
## With a description [#with-a-description]
Pass an options object with `title` and `description` for a secondary line. It reveals with a [`Collapse`](/docs/collapse) height animation.
## Action [#action]
`action` is **any `ReactNode`** — its own section under the toast, revealed independently of the description. Compose it however you like; the kit ships `Notification.ActionTrigger` for the standard button styling. Keep the id `notify.*` returns to dismiss the toast from inside the handler — good for an **Undo**.
## Promise [#promise]
`notify.promise` drives a **single** toast through an async lifecycle: it starts as `loading`, then transitions to `success` or `error` when the promise settles. `success` / `error` may be functions of the resolved value / thrown error.
## Updating a toast [#updating-a-toast]
Every spawn returns an **id**. Keep it and call `notify.update(id, …)` to patch a live toast — only the fields you pass change; anything you already set is kept, and the status type is preserved. To change the **status** too (say a manual `loading → success`), re-call the status helper with the same `id`. Because the description and action are independent `Collapse` sections, adding or removing either **animates its height** rather than jumping.
## Custom color [#custom-color]
Every toast shares one outline surface; `color` is the only styling knob. A status helper picks the hue for you, so it doesn't take a `color` (passing one is a type error). Call `notify(...)` directly for a toast with no status semantics and give it any palette `color`; pass `icon: null` to drop the leading glyph.
## Placement & stacking [#placement--stacking]
`placement` (a `createNotifier` option) anchors the region to any edge or corner. With `expand` (default), toasts collapse into a tidy **deck** — older cards peek behind the newest, tops aligned — that **expands into a column on hover**; hovering also **pauses** the auto-dismiss timers. `max` caps how many render at once.
Because placement belongs to the notifier (not an individual toast), each button below is its own `createNotifier` instance.
## Behaviors [#behaviors]
* **Auto-dismiss** after `duration` (default 5s); `loading` toasts never expire.
* **Pause** while the pointer is over the stack, and while the tab is hidden — so nothing expires unseen.
* **Swipe / drag** a toast aside to dismiss it, or **click** it. Presses that start on the close button or an action are left to that control.
* **Mobile** (below the `xs` breakpoint) the region pins to the bottom, full-width, above the safe area — regardless of `placement`.
## Playground [#playground]
The controls below build a single toast and spawn it on click. Notifier-level options (`placement` / `max` / `expand`) are set once at creation, so tune those in your `createNotifier` call.
## API [#api]
Unlike the rest of the kit, `notify(...)` / `notify.success(...)` / etc. don't take a `testId` — there's no props object rendered as a component here to thread one through, just a plain input object consumed by an imperative call. Each call already returns an **id** (see `notify.update` / `notify.dismiss` above) for referencing a specific toast from code; to find one in the DOM, query by role/text per the [Testing](/docs/testing) guide, or reach for `Notification.Root`'s own `testId` when you compose a bespoke toast body by hand.
`createNotifier(options)` — configures the notifier and its region:
`` — the region renderer `createNotifier` returns:
```tsx
```
`notify(input)` and `notify.success/error/warning/info/loading(input)` — where `input` is a title node or these options:
The bound `notify` object also carries: `notify.promise(promise, { loading, success?, error? })`, `notify.update(id, input)`, `notify.dismiss(id?)` (one toast, or all if omitted), `notify.remove(id)` (drop immediately, no exit), `notify.has(id)`, and `notify.getToasts()`.