Notification Center
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
Each notification object should follow this structure:
Props
| Name | Type | Default | Description |
|---|---|---|---|
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 | "400px" | Maximum height of the notifications list |
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
Use Cases
App notification hub with bell icon
Activity feed displays
System message aggregation
Task assignment alerts