realtime pattern
Notifications feed
In-app notification list. Header bell opens a Popover containing the feed.
When to use it
User clicks the bell icon in the header.
- Unread count clear
- Mark-as-read in 1 tap
- Click-through to source
Layout regions
- trigger
- Bell + unread count badge
- popover
- Floating panel
- header
- Title + Mark all read action
- list
- footer
- Link to /notifications full page
States
- default
- Has notifications
- empty
- No notifications
- loading
- Initial load
Example
<Popover><PopoverTrigger asChild><IconButton aria-label={`Notifications, ${unread} unread`}><BellIcon /><Badge>{unread}</Badge></IconButton></PopoverTrigger><PopoverContent><NotificationsList /></PopoverContent></Popover>The full Notifications feed pattern specifies 3 exact microcopy strings, 2 motion specs, 4 composition rules — all gated behind the full recipe. Get the full recipe.