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 |
Best Practices
Do
- ✓ Keep notification titles concise and actionable
- ✓ Use relative time formatting for better context
- ✓ Provide clear visual distinction between read and unread notifications
- ✓ Include relevant icons or avatars to make notifications scannable
- ✓ Allow users to mark all as read or clear all for bulk management
- ✓ Show empty state with helpful message when no notifications exist
Don't
- ✗ Don't overwhelm users with too many notifications
- ✗ Don't make notifications dismissible without a way to view them later
- ✗ Don't use vague notification titles - be specific
- ✗ Don't forget to handle notification click actions
- ✗ Don't show stale notifications - implement time-based filtering
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