NotificationItem

Server component, no client JSUnstable

ExamplesCopy Anchor Link

import type { JSX } from 'react';
import { Avatar } from '@nizivo/react/avatar';
import { NotificationItem } from '@nizivo/react/unstable/notification-item';

export function NotificationItemExample(): JSX.Element {
  return (
    <div style={{ display: 'grid', gap: 4, maxInlineSize: 420 }}>
      <NotificationItem
        href="/posts/autumn-launch#comments"
        unread
        avatar={<Avatar name="Jonah Okafor" decorative />}
        title="Jonah Okafor commented on Autumn launch"
        detail="“Love the new cover photo — ship it.”"
        time={<time dateTime="2026-10-28T09:39">2 min ago</time>}
      />
      <NotificationItem
        href="/orders/1042"
        avatar={<Avatar name="Maya Rao" decorative />}
        title="Maya Rao placed order #1042"
        detail="2 items · $84.00"
        time={<time dateTime="2026-10-28T08:12">1 h ago</time>}
      />
    </div>
  );
}

ImportCopy Anchor Link

import { NotificationItem } from '@nizivo/react/unstable/notification-item';

// Once per app (Getting started), after
// @nizivo/tokens/tokens.css and @nizivo/react/css/base.css
import '@nizivo/react/css/notification-item.css';

Static or interactiveCopy Anchor Link

Server. No client JavaScript: the row is a link (href, or render for a router link). How to choose.

ContentCopy Anchor Link

title says what happened, detail adds a quote or a figure and time when (a <time> is best). avatar takes an Avatar, decorative since the title names the person. unread tints the row, adds a dot and starts its name with "Unread" (labels.unread), so the state is never the tint alone.

PropsCopy Anchor Link

Other exportsCopy Anchor Link

NotificationItemLabels type

import type { NotificationItemLabels } from '@nizivo/react/unstable/notification-item'

NotificationItem's own strings (§16.4): serialisable, English defaults.

Name	Type	Default	Description
unreadrequired	string	'Unread'	Read before an unread row's title.

NotificationItemProps type

import type { NotificationItemProps } from '@nizivo/react/unstable/notification-item'

The props of NotificationItem, listed above.

Data attributes and slotsCopy Anchor Link

Style parts by class (.nz-<slot>) and state by data attribute. Attribute meanings come from contracts/vocabulary.json.

CSS hooksCopy Anchor Link

Set a hook on the component's class or any ancestor to restyle it without specificity games; leave it unset for the default shown.

This stylesheet reads no public hook.

Layers: nz.components. Classes: .nz-notification-item, .nz-notification-item-avatar, .nz-notification-item-detail, .nz-notification-item-dot, .nz-notification-item-text, .nz-notification-item-title.

AccessibilityCopy Anchor Link

These parts are interactive. Each gets the focus outline and touch-action rule from @nizivo/react/css/base.css (the nz.base layer), so the floor survives a restyle:

• notification-item: draws the focus outline itself on keyboard focus.

KeyboardCopy Anchor Link

To be written.