# Notification
> Generated from notification.contract.json — do not edit by hand.

A richer, stacking message with a title + description — rendered through antd's notification API.

Tier: **composite-antd**. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.

Surfaces: editor, dashboard, settings.

## Props
| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `message` | string | `—` | The bold title line |
| `description` | string | `—` | The supporting body text |
| `type` | success | info | warning | error | `—` | Status glyph + tone |
| `placement` | topLeft | topRight | bottomLeft | bottomRight | `topRight` | Which corner it stacks in |
| `duration` | number | `4.5` | Seconds on screen; 0 keeps it until dismissed |
| `btn` | ReactNode | `—` | One optional action (e.g. Undo) rendered in the card |

## Visual standard (measured)
- Card: white elevated · 384 wide · radius 8
- Title: ink #1A1A1A, SemiBold
- Type: success · info · warning · error (status glyph + tone)
- Placement: topRight default (4 corners)
- Duration: 4.5s default (0 = sticky)

## When to use
- **Notification** — a message with a title + detail, or one from a background event the user may act on later
- **Toast** — a one-line, past-tense confirmation with nothing to act on
- **Modal** — the user must respond before continuing

Give it a short title and a one-sentence description. Put at most one action in it; anything more belongs in a Modal or the page itself.