Notification Panel
ProA slide-out panel or dropdown overlay that lists recent notifications and activity. Triggered by a bell icon in the header, it displays a chronological feed of notification items grouped by date. Each item shows an icon, title, description, timestamp, and read/unread state. Includes a "Mark all as read" action and optional category filters.
4 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | ||
| Grouped |
Usage Guidelines
Show an unread badge count on the bell icon trigger.
Auto-open the notification panel — let the user trigger it explicitly.
Group notifications by date — "Today", "Yesterday", "This week".
Remove notifications without a way to retrieve them — use "Archive" instead of "Delete".
Provide a "Mark all as read" bulk action.
Show more than 50 notifications without pagination or virtual scrolling.
Include timestamps using relative format — "2 hours ago", "Yesterday at 3:00 PM".
Code
Design Tokens
Accessibility
- Panel uses role="dialog" with aria-label="Notifications" and aria-modal="true".
- Focus is trapped within the panel when open.
- Unread count on the trigger badge is announced — aria-label="Notifications, 3 unread".
- Each notification item is focusable and readable by screen readers.
- Escape closes the panel and returns focus to the bell icon trigger.