Notification Item

Pro

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.

Preview

Installation

npx @lumioui/cli add pro/notification-item

Usage

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

Also exported: NotificationRequestActions.

Examples

Mentions with quote

A team workspace's mentions inbox.

Order updates

A shop's order updates.

Security alerts

An account's security inbox in neutral ink.

Social activity

A photo app's activity tab.

API reference

NotificationItem

Prop Type Default
actors NotificationActor[]

People behind the activity. The first one or two are named and shown.

 []
othersCount number

Additional people beyond actors — "and 3 others".

 0
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.

 false
badge NotificationBadge

Small type badge on the actor face.

 —
icon IconName

Leading icon disc for rows without actors.

 "bell"
tone NotificationTone

Colour of the leading icon disc. Default "neutral".

 "neutral"
thumbnail string

Trailing square thumbnail (the post, product or photo concerned).

 —
followBack boolean

Trailing follow-back button. Pass following / onFollowingChange to control it.

 false
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 Default
onAccept () => void —
onDecline () => void —
acceptLabel string "Accept"
declineLabel string "Decline"
className string —