Notifications Feed
A notifications feed is the panel behind the bell: what happened while the reader was elsewhere, newest first, with the unread ones marked. It is addressed mail rather than a log, mentions, replies, invitations, a digest folding many small events into one line, and rows often carry the action that resolves them, so an invitation can be accepted without opening anything. Two compositions cover it, one sorting by tab and one by read state.
Read state is the whole design, and it is harder than it looks. Marking everything read the moment the panel opens makes the badge honest and loses the reader's place; marking only on click leaves a badge that never clears and soon stops meaning anything. The sorted composition takes a third route (reading a row moves it down out of the new group) which keeps the count truthful and the panel organised, at the cost of a row moving while the reader is looking at it.
Tabbed inbox
Best for
Notification panels: a day of activity behind three tabs
Anatomy
Bell chip, title and Mark All As Read · pill tab track · Today and Yesterday groups · stacked reactors, a quoted mention, Follow Back, a digest and a file chip
Notifications
Everything that happened while you were away.
“@you can you confirm the red unread dot uses Error/#ec0d33?
Sorted inbox
Best for
Inboxes that track what you have seen: unread first, read below
Anatomy
Underlined tabs with a live unread count · NEW rows tinted with a red dot · RECENT rows ruled apart · Decline and Accept · reading a row moves it down
Notifications
Using Notifications Feed
Reach for it when
- A bell in the top bar that has to hold a day of activity
- Mentions and replies the reader is expected to answer
- Invitations and requests that can be accepted or declined on the spot
- A digest row folding many small events into one line
Reach for something else when
- Something the reader must see before continuing. That is a modal or an inline banner, because a feed is only opened when someone chooses to open it
- A record of everything happening in a workspace, including other people's work; that is an activity feed or an audit log, since a notifications feed carries only what is addressed to the reader
- Confirmations of the reader's own actions: a toast says it and goes, and putting 'saved' in the inbox fills it with rows nobody will read
Where it shows up
Product bell menu
The panel a top bar opens. Tabs separate everything from mentions and things followed, rows group under Today and Yesterday so a timestamp is not doing all the work, and Mark All As Read sits in the header.
Social interactions
Reactions, mentions and follows arriving faster than anyone reads them. Several reactors stack into one avatar cluster on a single row, a mention quotes the line it came from, and Follow Back resolves the row where it stands.
Access requests
Invitations and permission requests that need a yes or a no. Decline and Accept sit on the row, which is the difference between a notification and a task: the reader finishes it in the panel instead of opening a page.
Document activity
Somebody shared a file or left a comment on one. The row carries a chip naming the file so the reader can open the thing the notification is about, rather than being dropped at a workspace root.
Questions
When should a notification be marked as read?
On the reader's action, not on the panel opening. Someone opening the bell to check for one specific thing should not have every unread row cleared underneath them and lose their place in the list. Mark a row read when it is opened or its action is taken, and offer an explicit mark-all control for a deliberate clean slate.
Should the unread badge show a count or a dot?
A count where the reader is expected to act on each item, a dot where the feed is ambient. A number sets an expectation that it will reach zero, and in a product that generates dozens of notifications a day it becomes a permanent reproach people learn to ignore. A dot says something is new without promising an inbox that empties.
Be first in,
and 10% off.
Join the list and we’ll email you the moment the code library and MCP server go live: with a 10% discount code to use whenever you decide to buy.
Notifications Feed
A notifications feed is the panel behind the bell: what happened while the reader was elsewhere, newest first, with the unread ones marked. It is addressed mail rather than a log, mentions, replies, invitations, a digest folding many small events into one line, and rows often carry the action that resolves them, so an invitation can be accepted without opening anything. Two compositions cover it, one sorting by tab and one by read state.
Read state is the whole design, and it is harder than it looks. Marking everything read the moment the panel opens makes the badge honest and loses the reader's place; marking only on click leaves a badge that never clears and soon stops meaning anything. The sorted composition takes a third route (reading a row moves it down out of the new group) which keeps the count truthful and the panel organised, at the cost of a row moving while the reader is looking at it.
Tabbed inbox
Best for
Notification panels: a day of activity behind three tabs
Anatomy
Bell chip, title and Mark All As Read · pill tab track · Today and Yesterday groups · stacked reactors, a quoted mention, Follow Back, a digest and a file chip
Notifications
Everything that happened while you were away.
“@you can you confirm the red unread dot uses Error/#ec0d33?
Sorted inbox
Best for
Inboxes that track what you have seen: unread first, read below
Anatomy
Underlined tabs with a live unread count · NEW rows tinted with a red dot · RECENT rows ruled apart · Decline and Accept · reading a row moves it down
Notifications
Using Notifications Feed
Reach for it when
- A bell in the top bar that has to hold a day of activity
- Mentions and replies the reader is expected to answer
- Invitations and requests that can be accepted or declined on the spot
- A digest row folding many small events into one line
Reach for something else when
- Something the reader must see before continuing. That is a modal or an inline banner, because a feed is only opened when someone chooses to open it
- A record of everything happening in a workspace, including other people's work; that is an activity feed or an audit log, since a notifications feed carries only what is addressed to the reader
- Confirmations of the reader's own actions: a toast says it and goes, and putting 'saved' in the inbox fills it with rows nobody will read
Where it shows up
Product bell menu
The panel a top bar opens. Tabs separate everything from mentions and things followed, rows group under Today and Yesterday so a timestamp is not doing all the work, and Mark All As Read sits in the header.
Social interactions
Reactions, mentions and follows arriving faster than anyone reads them. Several reactors stack into one avatar cluster on a single row, a mention quotes the line it came from, and Follow Back resolves the row where it stands.
Access requests
Invitations and permission requests that need a yes or a no. Decline and Accept sit on the row, which is the difference between a notification and a task: the reader finishes it in the panel instead of opening a page.
Document activity
Somebody shared a file or left a comment on one. The row carries a chip naming the file so the reader can open the thing the notification is about, rather than being dropped at a workspace root.
Questions
When should a notification be marked as read?
On the reader's action, not on the panel opening. Someone opening the bell to check for one specific thing should not have every unread row cleared underneath them and lose their place in the list. Mark a row read when it is opened or its action is taken, and offer an explicit mark-all control for a deliberate clean slate.
Should the unread badge show a count or a dot?
A count where the reader is expected to act on each item, a dot where the feed is ambient. A number sets an expectation that it will reach zero, and in a product that generates dozens of notifications a day it becomes a permanent reproach people learn to ignore. A dot says something is new without promising an inbox that empties.
Related blocks
All blocksBe first in, and 10% off.
Join the list and we’ll email you the moment the code library and MCP server go live: with a 10% discount code to use whenever you decide to buy.