ComponentsEnterpriseNotificationCenter

NotificationCenter

NotificationCenter collects time-sensitive notices and their read and action state.

All / unreadControlled read statePriority tonesItem actionsBulk read

Overview

Use NotificationCenter as a persistent inbox for relevant notices that people may need to review, act on, or revisit.

Workspace notifications

Live preview

Notifications

1 unread

  1. Unread
WorkspaceNotifications.tsx
tsx
import { NotificationCenter } from 'omverse-ui'
 
const notices = [/* ... */]
 
<NotificationCenter
items={notices}
readIds={readIds}
onReadIdsChange={setReadIds}
onAction={handleAction}
/>

Anatomy

The center combines unread summary and filtering with notices that expose priority, content, metadata, and actions.

Notifications2 unread
Project moved to at riskEnterprise migration needs review.
  1. 1
    Unread summary

    States pending attention.

  2. 2
    Bulk action

    Marks visible notices read.

  3. 3
    Filter

    Switches all and unread views.

  4. 4
    Notification content

    Explains event and context.

  5. 5
    Notice action

    Opens the relevant workflow.

When to use

Use NotificationCenter for attention management where notices need tracking and action.

Recommended

  • Collect asynchronous notices

    Keep updates available after they arrive.

  • Support follow-up actions

    Link directly to relevant work.

  • Manage attention

    Track read and unread state.

When not to use

NotificationCenter should be reserved for actionable updates that need triage.

Avoid

  • Do not use for inline feedback

    Use Alert or Toast.

  • Do not narrate all collaboration

    Use ActivityFeed.

  • Do not store immutable evidence

    Use AuditLog.

Variants

Outlined

Bounded inbox.

Filled

Tonal panel.

Raised

Popover-style center.

Density

Three item sizes.

States

StateTriggerVisual responseInteraction
UnreadID absent from readIdsTonal item and indicatorOpen or act
ReadID in readIdsStandard itemCan revisit
FilteredUnread selectedUnread notices onlySwitch filter
All caught upNo unread noticesPositive empty messageReturn to all
LoadingFetch in progressStatusWait

Behavior

Opening or acting can be tied to read-state transitions while filtering remains internal to the collection.

Read state

Opening or acting marks a notice read.

Filtering

All and unread views preserve the collection.

Bulk read

Marks every current notice as read.

Actions

Host owns navigation and mutation.

Accessibility

KeyAction
TabMoves through filters, notices, and actions.
EnterSpaceOpens, acts on, dismisses, or filters.
  • Announce the unread count politely.
  • Expose active filters with aria-pressed.
  • State unread status in text.
  • Give dismissal controls notice-specific names.
  • Keep item and secondary actions separate.

Content guidelines

Keep each notice concise, with outcome, impact, and next action.

Lead with the outcome

State what changed clearly.

ExampleAccess request approved

Add actionable context

Explain impact or next step.

ExampleReview payment details before renewal.

Name direct actions

Use concise verbs.

ExampleReview, Open, Dismiss

Use categories consistently

Identify product domain.

ExampleSecurity

Examples

Use an empty-state section for teams with catch-up workflows.

All caught up

Live preview
✓ You are all caught upNo unread notifications

Props / API

NotificationCenter extends section attributes.

Props

PropTypeDefaultDescription
itemsreadonly NotificationCenterItem[]requiredNotice collection.
readIdsreadonly string[]undefinedControlled read identifiers.
defaultReadIdsreadonly string[][]Initial read identifiers.
onReadIdsChange(ids) => voidundefinedRuns after read state changes.
titleReactNode'Notifications'Visible heading.
defaultFilter'all' | 'unread''all'Initial filter.
loadingbooleanfalseShows loading status.
emptyStateReactNode'No notifications'Empty all-filter content.
onItemClick(item) => voidundefinedOpens a notice.
onAction(item) => voidundefinedRuns its primary action.
onDismiss(item) => voidundefinedDismisses a notice.
showMarkAllReadbooleantrueShows bulk read action.
variant'outlined' | 'filled' | 'raised''outlined'Surface treatment.
size'sm' | 'md' | 'lg''md'Item density.