Skip to main content
Noor UI

Notification Center

New

A bell icon with dropdown displaying notifications, unread count badge, and actions to manage notifications. Fully bilingual with RTL support.

Preview

Features

Unread Badge

Badge showing unread count on the bell icon

Relative Time

Smart time display (5m ago, 2h ago, etc.) in both languages

Icons & Avatars

Support for custom icons or user avatars

Mark as Read

Individual or bulk mark as read functionality

Remove Notifications

Hover to reveal remove button on each notification

Bilingual

Full Arabic support with proper time formatting

Examples

With Avatars

tsx

Empty State

tsx

Notification Type

Notification Interface

Structure of a notification object

interface Notification {
  id: string
  title: string
  description?: string
  time: string          // ISO date string or Date
  read?: boolean
  icon?: React.ReactNode
  avatar?: string       // URL to avatar image
}

Props

NameTypeDefaultDescription
notifications
Notification[]—Array of notification objects to display
onNotificationClick
(notification: Notification) => void—Callback when a notification is clicked
onMarkAsRead
(id: string) => void—Callback when a notification is marked as read
onMarkAllAsRead
() => void—Callback when "Mark all as read" is clicked
onClearAll
() => void—Callback when "Clear all" is clicked
onRemove
(id: string) => void—Callback when a notification is removed
className
string—Additional CSS classes for the trigger button
maxHeight
string—Maximum height of the notifications list

Best Practices

Do

  • ✓ Show unread count badge on the bell icon
  • ✓ Use relative time formatting (5m ago, 2h ago)
  • ✓ Group notifications by date when appropriate
  • ✓ Provide clear actions for each notification type
  • ✓ Show notification count badge in the UI

Don't

  • ✗ Don't show notifications older than 30 days
  • ✗ Don't use generic notification messages
  • ✗ Don't make all notifications look the same
  • ✗ Don't forget to handle empty state gracefully
  • ✗ Don't overwhelm users with too many notifications at once

Accessibility

  • ✓Bell icon button has proper aria-label
  • ✓Unread count badge is visible to screen readers
  • ✓Keyboard navigation through notifications
  • ✓Clear visual distinction between read/unread states
  • ✓Escape key closes the popover