Build Assets
UI Component
Notification Bell
Icon button with unread count badge that opens a notification dropdown.
Platform: bothTags: notifications, bell, badge, alerts, inbox
Purpose
Signals new activity to users and provides quick access to recent notifications. The unread count badge uses Von Restorff differentiation — it must stand out from surrounding UI.
Anatomy
- Bell icon: 20–24px, standard nav icon weight
- Unread badge: 16px circle (1–9) or 16×20px pill (10+), accent red, white number
- Badge position: top-right of icon, slightly overlapping
- Dropdown panel: 320–380px wide, max-height 480px, scrollable
- Notification item: icon (type) + title + time ago + read/unread indicator
- Footer: "See all" link, "Mark all read" action
States
- No unread: bell icon only, no badge
- Unread 1–9: red circle badge with number
- Unread 10+: "9+" or "99+" pill badge
- Dropdown open: panel visible, bell icon highlighted
- All read: badge removed immediately on "Mark all read"
Tokens
spacing
badgeSize: 16pxpanelWidth: 360pxitemPadding: 12px 16px
Do
- Update badge count in real-time without page refresh
- Mark notification as read when user clicks it
- Show relative time ("2 min ago") not absolute timestamps in the panel
- Group notifications by type or date when count is high
Don't
- Show more than 20–25 notifications in the dropdown — paginate or link to full inbox
- Use the notification bell for marketing messages — reserve for genuine user-relevant activity
- Flash or animate the badge continuously — it becomes noise (Von Restorff requires restraint)
- Show the badge for zero unread items
Accessibility
- aria-label="Notifications, 3 unread" updates with count
- aria-haspopup="true" and aria-expanded on the bell button
- Dropdown: role="dialog" or role="menu" depending on content type
- Live region for count changes: aria-live="polite"