UI components · Messages
Notification Center
Also called: Notifications panel, Inbox, Activity feed, Notification dropdown
The one place to see all in-app notifications. Click the bell to open a list of comments, mentions, and system messages in time order. Unread ones have a dot, and you can mark all as read in one click.
Click “Labeled” to see what each part is called.
How to tell AI
Swap in your own content firstAdd a notification center on the right side of the top navbar. The bell icon button is 36px, with a red badge at the top right showing the unread count (99+ above 99). On click, open a panel under the bell, 360px wide and up to 480px tall: the title "Notifications" with a "Mark all as read" text button on the right, then three tabs "All / Mentions / System." Each notification is about 64px tall: a 32px avatar or type icon on the left, one or two lines of text in the middle (names in bold), and a gray relative time like "5 min ago." Unread ones get a 6px blue dot on the left and a light blue background; clicking one goes to its page and marks it as read. Group the list into "Today" and "Earlier," and load more when scrolling to the bottom. With no notifications, show an illustration and "You're all caught up." Pin a "View all notifications" link and a settings icon at the bottom.
Send to
01Decide
Does your content look like this?
Check both columns to confirm Notification Center is what you need.
Use Notification Center when
- Products with many kinds of messages (comments, mentions, approvals, order updates) that need one place to see them all
- Users may have missed a real-time alert and need to come back and find it later
- Collaboration, community, and admin products where notifications need read and unread states
Pick something else when
Just reporting the result of an action (saved, copied). A toast is enough, and it doesn't need to go into the notification center.
Use insteadNotificationOne-on-one chats. Build a separate messages or chat page.
Not sure? Upload a screenshot and page analysis will check which layout each block should use.
02Pitfalls
Common misuse
It looks like it works, but it makes things harder for users.
- 01
Every notification looks the same, with no read or unread state, no time, and no "Mark all as read," so users have to open them one by one
- 02
Clicking a notification does nothing and doesn't take you to the comment, order, or approval
- 03
Popping up every past notification at once as corner notifications, filling the whole screen
03Spot it
How to spot it
Look at the overall structure first, then check a few features you can spot at a glance.
Structure
A bell entry with an unread count plus a notification list panel. The panel has a title with "Mark all as read," filter tabs, notifications grouped by time (icon or avatar, message, time, unread marker), and "View all" and settings links at the bottom.
PartsClick one to highlight it in the wireframe above
04Explained
In detail
A notification center usually has two parts: the bell icon in the navbar (with an unread count Badge) and the list that opens from it. The list can be a floating panel under the bell, a Drawer that slides in from the right, or a full "Notifications" page. Each notification has an icon or avatar, a one-line message (who did what to what), and a time. Unread ones get a small dot or a tinted background. At the top there are filters like "All / Mentions / System" and "Mark all as read," and at the bottom there's "View all" and a link to notification settings.
How it differs from a Notification: a notification pops up in a corner of the screen the moment something happens and disappears after a few seconds. A notification center is the inbox you check later. Every notification is kept there, including the ones users missed. It's different from a Toast too. A toast only reports the result of what you just did ("Saved"), and it never goes into the notification center.
Every notification should link to its page (the comment, order, or approval), and clicking it marks it as read. Group them by "Today / Earlier," and load older ones in pages. When there's nothing, show a friendly empty state instead of a blank panel. Show "99+" when unread goes over 99. If there are many kinds of notifications, give users settings to turn each kind on or off.
Developer infoTerm ID, DOM cues, match priority
- Term ID
component-notification-center- DOM selectors
The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).
.rnf-notification-feed.rnf-notification-feed-popover[aria-label*="notification" i]:is([role="dialog"], [role="region"], section, aside)[aria-label*="通知"]:is([role="dialog"], [role="region"], section, aside)
- Class keywords
Class names, ids and data-testid are split into words and matched in order, so page-header, PageHeader_root__x7a and pageHeader all become page, header.
notification-centernotification-panelnotifications-panelnotification-listnotifications-listnotification-dropdownnotifications-dropdownnotification-popovernotice-centermessage-center
- Component names
React / Vue component names read in development mode. Case-insensitive; library prefixes such as El, Ant and Mui are dropped.
NotificationCenterNotificationPanelNotificationListNotificationDropdownNotificationFeedNotificationInboxNoticeIcon
- Structure
Computed from how the element is laid out and styled. It only adds to the score and never decides on its own.
overlayrepeated items
- Priority
- 3 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 30, 2026