Notifications are where a product talks back, and they pile up fast. These components cover the parts beyond a single toast: a bell with an unread count, a panel or inbox that groups what happened, activity feeds and the read and archive controls people expect. Check how each one handles a long list and an empty one. Install it, then fill it from your own events and decide what deserves a badge.
Notification components are where an app collects what happened while people were away. They range from a bell with an unread badge to a full notification centre: a panel or page that groups updates by time or type, shows who did what and lets people mark things read, archive them or jump to the source.
Decide what is worth notifying before choosing a design, because too many alerts teach people to ignore them all. Keep unread state clear, make each item link to its context, and give people a quick way to mark everything read and to change what they receive.
Frequently asked questions
Fetch notifications as a list with read state, show them in a popover or page grouped by date, and update the unread count as items are opened. Push new ones over a websocket or poll.
A toast is a brief message about something that just happened and fades on its own. A notification is stored, appears in a list and stays until read or cleared.
Place a small badge on the icon with the number, cap it at something like 99 plus, and hide it at zero. Announce changes to screen readers with an accessible label on the button.
By time, such as today and earlier, or by type, such as mentions and updates. Collapse many similar events into one line, for example several likes on the same post.
Mark an item read when it's opened, and offer a mark all as read action. Show unread items with a clear but quiet difference, such as a bolder title or a small marker.
For collaboration and messaging, yes, through websockets or server sent events. For most other apps, refreshing when the panel opens is enough and much cheaper.
Send fewer of them. Notify only about things that need attention, batch the rest into digests, and give people fine grained settings so they can mute a type instead of everything.
