NotificationCenter

A bell button with an unread badge that opens a panel of updates with read state, filters, inline details, and bulk actions.

When to use

• An in-app inbox for asynchronous updates: published stories, comments, conflicts flagged for review.
• Places where people need to triage (mark read, dismiss, clear) rather than just see a message once.
• Not for immediate confirmations of an action: use Toast / ToastStack. Not for persistent page conditions: use Alert.

Usage

import { NotificationCenter } from "@/components/iris/notification-center/notification-center";

h(NotificationCenter, {
  notifications: [
    {
      id: "n1",
      title: "Central bank story published",
      description: "Myrto Lekka approved the quick brief from 5 sources.",
      time: "2m",
      tone: "success",
    },
    { id: "n2", title: "2 conflicts flagged on Greek bond yields story", time: "18m", tone: "warning" },
    { id: "n3", title: "Feeds refreshed", time: "Yesterday", read: true },
  ],
  onReadChange: (item, read) => api.markRead(item.id, read),
  onDismiss: (item) => api.dismiss(item.id),
});

Props

Prop	Type	Default	Description
notifications	NotificationItem[]	—	Required. Initial list: { id, title, description?, time, read?, tone?: "info" | "success" | "warning", actor?: { name, photo } }.
label	string	"Notifications"	Panel heading and trigger name.
onReadChange	(item, read: boolean) => void	—	Called per item on mark read/unread and for each item in "Mark all read".
onDismiss	(item) => void	—	Called per item on dismiss and for each item in "Clear read".
open / onOpenChange	boolean / (open) => void	—	Control the panel.
avoidCollisions	boolean	true	Let the panel flip and shift to stay in view.

Notes

• The list is seeded from notifications on mount and then managed internally; report changes to your backend through the callbacks.
• Items with actor show that person's avatar from photo (a local asset); others show a tone icon.
• Built on Radix Popover: focus moves into the panel, Escape closes it. The trigger's name includes the unread count; the summary line is a polite live region; All / Unread are aria-pressed toggles and rows are aria-expanded buttons.
• Rows collapse their own height on removal and bulk actions cascade; reduced motion uses fades.
• Reads --surface, --hover, --line, --line-soft, --line-strong, --ink, --ink-2, --ink-3, --shadow-floating, and the tone tokens --accent, --green, --orange.