# Notification Item

Activity row with avatars, a type badge, a sentence that bolds the people, the time and a thumbnail or follow-back button. Unread rows stand out and quietly settle once read.

> Composed · Pro · Data Display — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/notification-item
```

## Import

```tsx
import { NotificationItem, NotificationRequestActions } from "@/components/ui/notification-item/notification-item";
```

## Variants

- `mentions` — Mentions with quote: `npx @lumioui/cli add pro/notification-item-mentions`
- `orders` — Order updates: `npx @lumioui/cli add pro/notification-item-orders`
- `security` — Security alerts: `npx @lumioui/cli add pro/notification-item-security`
- `social` — Social activity: `npx @lumioui/cli add pro/notification-item-social`

## Props

### NotificationItem

| Prop | Type | Notes |
| --- | --- | --- |
| `actors?` | `NotificationActor[]` | People behind the activity. The first one or two are named and shown. |
| `othersCount?` | `number` | Additional people beyond `actors` — "and 3 others". |
| `action?` | `string` | The verb phrase after the names: "liked your post.", "started following you." |
| `title?` | `string` | System / non-social rows: bold lead sentence instead of actors. |
| `body?` | `string` | Muted sentence after the title (or after the action). |
| `quote?` | `string` | Quoted comment or mention text, set under the sentence with a rule. |
| `time?` | `string` | Relative time ("2m", "3h", "Mon") — set inline, muted. |
| `unread?` | `boolean` | Unread rows are lit (wash, leading bar, dot); clearing switches them off in place. |
| `badge?` | `NotificationBadge` | Small type badge on the actor face. |
| `icon?` | `IconName` | Leading icon disc for rows without actors. |
| `tone?` | `NotificationTone` | Colour of the leading icon disc. Default "neutral". |
| `thumbnail?` | `string` | Trailing square thumbnail (the post, product or photo concerned). |
| `followBack?` | `boolean` | Trailing follow-back button. Pass `following` / `onFollowingChange` to control it. |
| `following?` | `boolean` | — |
| `onFollowingChange?` | `(following: boolean) => void` | — |
| `trailing?` | `React.ReactNode` | Any trailing content (a button, a chevron). Wins over thumbnail / followBack. |
| `footer?` | `React.ReactNode` | Extra content under the sentence (action buttons, progress). |
| `onPress?` | `() => void` | — |
| `accessibilityLabel?` | `string` | Screen-reader label override. Default is the sentence + time + unread. |
| `className?` | `string` | — |
| `switchOnDelay?` | `number` | Mount dim and switch on after this many ms (feeds pass `rowDelay(i)`). Omit to render at rest. |

### NotificationRequestActions

| Prop | Type | Notes |
| --- | --- | --- |
| `onAccept?` | `() => void` | — |
| `onDecline?` | `() => void` | — |
| `acceptLabel?` | `string` | — |
| `declineLabel?` | `string` | — |
| `className?` | `string` | — |

## Icons rendered

- `shield` — /icons.html?i=shield
- `heart` — /icons.html?i=heart
- `message-circle` — /icons.html?i=message-circle
- `user-plus` — /icons.html?i=user-plus
- `repeat` — /icons.html?i=repeat
- `star` — /icons.html?i=star
- `bell` — /icons.html?i=bell

Source: https://lumioui.com/components/notification-item