Notification item

Usage

Overview

NotificationItem renders one notification entry from props. A parent inbox supplies core RoutedNotification values (structurally compatible with NotificationItemEntry), localized copy props, and handlers for Go to, Mark as read, and custom actions. The component does not fetch, store, route, or branch on notification categories.

Interactive examples and edge cases for this component are in Storybook.

DefaultOpens in a new tab

When to use

A notifications panel or inbox list where each row shares the same chrome.
System or person senders with optional folded detections and a technical error code.

When not to use

Transient overlay feedback: use Toast.
Chat transcript lines: use Message.
Generic settings or navigation lists: use Item.

Content guidelines

Pass plain LocalizedMessage for entry.message; line one is a person's name in emphasis, or a system name in bold at the start of the message; the message is subtle text clamped to two lines.
Supply every visible and accessibility string through copy props; use updatesLabel(count) for folded detection labels.

Behavior

The whole row is the Go to target and calls onGoTo with the entry; navigation is the parent's job. There is no visible Go to button. The row's accessible name ends with entry.goTo.label.
Time is absolute and short: a clock time today, a short date such as "Mar 20" before today. The full date and time are in a tooltip and in the accessible name.
An unread row shows line one at full contrast and a read row shows both lines subtle. There is no unread dot and no severity styling.
Mark as read is an icon button on unread rows only. With the actions menu it replaces the time on row hover and focus within, sits above the row target and never calls onGoTo. On devices without hover they are always shown.
The actions menu stays reachable by keyboard and touch and includes Mark as read on unread rows and entry.actions (consequential actions). There is no Mark as unread or Dismiss: the feed stores only per-person read state.
entry.group is optional and read by the inbox, which renders a heading per group in entry order. The row ignores it. Rows have no dividers.

Navbar / Accessibility

Notification item / Accessibility

On this page

Notification item

Usage

Overview

Interactive examples and edge cases for this component are in Storybook.

DefaultOpens in a new tab

When to use

A notifications panel or inbox list where each row shares the same chrome.
System or person senders with optional folded detections and a technical error code.

When not to use

Transient overlay feedback: use Toast.
Chat transcript lines: use Message.
Generic settings or navigation lists: use Item.

Content guidelines

Pass plain LocalizedMessage for entry.message; line one is a person's name in emphasis, or a system name in bold at the start of the message; the message is subtle text clamped to two lines.
Supply every visible and accessibility string through copy props; use updatesLabel(count) for folded detection labels.

Behavior

The whole row is the Go to target and calls onGoTo with the entry; navigation is the parent's job. There is no visible Go to button. The row's accessible name ends with entry.goTo.label.
Time is absolute and short: a clock time today, a short date such as "Mar 20" before today. The full date and time are in a tooltip and in the accessible name.
An unread row shows line one at full contrast and a read row shows both lines subtle. There is no unread dot and no severity styling.
Mark as read is an icon button on unread rows only. With the actions menu it replaces the time on row hover and focus within, sits above the row target and never calls onGoTo. On devices without hover they are always shown.
The actions menu stays reachable by keyboard and touch and includes Mark as read on unread rows and entry.actions (consequential actions). There is no Mark as unread or Dismiss: the feed stores only per-person read state.
entry.group is optional and read by the inbox, which renders a heading per group in entry order. The row ignores it. Rows have no dividers.

Navbar / Accessibility

Notification item / Accessibility

On this page