Notification Item

Avatar or icon, a message after the actor's name, time, unread dot and an optional button.

Activity

Lena Moreau started following you.2mFollow back

Sam Okafor commented on your photo: “That light is unreal.”1h

Your order #10482 has shipped. It arrives tomorrow.3h

New sign-in on a Mac in Lyon, France.Yesterday

A notification from a person shows their avatar and starts with their name in bold. A system notification shows an icon on a tinted tile. Unread rows end with a dot.

Installation

npx axiom add notification-item

pnpm dlx axiom add notification-item

yarn dlx axiom add notification-item

bun x axiom add notification-item

Also copies: item, avatar, icon, badge, button, text and their dependencies. The file lands in components/compositions/notification-item.tsx. It brings no tokens of its own.

Usage

import { NotificationItem } from "@/components/compositions/notification-item";

// From a person
<NotificationItem
	actor={event.user.name}
	avatar={{ uri: event.user.avatarUrl }}
	message="started following you."
	time="2m"
	unread={!event.readAt}
	actionLabel="Follow back"
	onAction={() => follow(event.user.id)}
	onPress={() => router.push(`/users/${event.user.id}`)}
/>

// From the app
<NotificationItem
	icon="shipping"
	message="Your order #10482 has shipped."
	time="3h"
	onPress={() => router.push("/orders/10482")}
/>

icon takes a name from your icon registry: add shipping, security… to icons.tsx first.

Props

Prop	Type	Default	Description
`actor`	`string`	—	Who the notification is about, in bold before the message. Gives the avatar its initials.
`message`	`string`	—	The rest of the sentence, up to three lines with the actor.
`time`	`string`	—	Already formatted: `"2m"`, `"Yesterday"`. In the link color while unread.
`avatar`	`ImageSourcePropType`	—	The actor’s photo, in an `md` Avatar.
`icon`	`IconName`	—	Replaces the avatar with the icon on a round tile, when there is no `avatar`.
`unread`	`boolean`	`false`	Adds a dot at the end of the row.
`actionLabel`	`string`	—	Label of the button under the message.
`onAction`	`() => void`	—	Shows the outlined `sm` button, with `actionLabel`.
`onPress`	`() => void`	—	Opens what the notification is about.
`onLongPress`	`() => void`	—	Usually opens a menu: mark as read, turn off this kind.

Accessibility

The row reads as one element and starts with its state: “Unread, Lena Moreau started following you., 2m”. The button stays a separate element, labelled with the actor: “Follow back, Lena Moreau”.

Built with

Item: the row, aligned to the top so long messages wrap under the avatar.
Avatar: the actor’s photo or initials.
Icon: the system icon.
Badge: the unread dot.
Button: the action.
Text: the message and the time.

Used in

No block uses Notification Item yet.

Conversation Item
Empty: for an empty activity feed.
Compositions