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
- popover
- header
- list
- footer
States
- default
- empty
- loading
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.