# NotificationItem

> One notification: who, what happened and when.

- **Level**: molecule · **Status**: stable · **Role**: feedback
- **Import**: `import { NotificationItem } from "@rrios-forge/ui/molecules/notification-item";`
- **Source**: `packages/ui/src/molecules/notification-item`

Notification feed row with leading slot, title, description, timestamp, badge and trailing action. Tone reinforces meaning without carrying it alone (R14). unread bolds the title and adds a coloured dot — the colour is reinforcement, not the message.

## Use it for

- Notification / timeline / activity item → `NotificationItem` / `TimelineItem` / `ActivityItem`

## Axes

| Axis | Part | Values | Default | Meaning |
|---|---|---|---|---|
| `tone` | — | `neutral` `info` `success` `warning` `danger` | `neutral` | Which semantic colour family the element speaks in. |
| `unread` | — | `true` `false` | `false` | Not yet seen: a dot and stronger weight until opened. |
| `selected` | — | `true` `false` | `false` | Chosen in a set: the selected wash plus a non-colour cue (weight, check). |

## Stories

- [Playground](/?path=/story/components-molecules-notificationitem--playground) · frame: `/iframe.html?id=components-molecules-notificationitem--playground&viewMode=story`
- [Tones](/?path=/story/components-molecules-notificationitem--tones) · frame: `/iframe.html?id=components-molecules-notificationitem--tones&viewMode=story`
- [Densities](/?path=/story/components-molecules-notificationitem--densities) · frame: `/iframe.html?id=components-molecules-notificationitem--densities&viewMode=story`
- [Unread](/?path=/story/components-molecules-notificationitem--unread) · frame: `/iframe.html?id=components-molecules-notificationitem--unread&viewMode=story`
- [With action](/?path=/story/components-molecules-notificationitem--with-action) · frame: `/iframe.html?id=components-molecules-notificationitem--with-action&viewMode=story`
- [Notification feed](/?path=/story/components-molecules-notificationitem--notification-feed) · frame: `/iframe.html?id=components-molecules-notificationitem--notification-feed&viewMode=story`

## Decisions that name it

- ADR-016 — NotificationCenter v2: Popover → Drawer + Provider/Hooks
- ADR-030 — Axis vocabulary: one name, one meaning

## Always

- Tokens only (R04); variants are semantic axes, never appearance (R02).
- Typography and actions are Poesía atoms, never raw HTML with utilities.
- Vibrant panes need a ground and never nest (ADR-027).