Notifications
The notification centre is the bell and the inbox every application ends up needing. The bell shows the unread count and rings when something arrives; behind it, notifications are grouped under Pinned, Today, Yesterday, Earlier this week and Older, with several about the same thing on the same day stacked as one.
Each has a title, text, its source, a picture or initials, how long ago it happened and up to three action buttons, and can be marked read, pinned, snoozed until later or dismissed. Tabs, a filter by source, search, "Mark all as read" and a settings page where the reader mutes a source. The list is your application's: every change comes out of one event, and new ones go in as they arrive.
An operations inbox
Approvals, builds, mentions and a weekly digest for a fictional trade supplier's back office. Open the bell: three approvals on the same thing are stacked, the digest is pinned, and the purchase order has actions. Send a test notification and watch the count and the announcement.
Get the code
<script src="/assets/bmx-components.min.js"></script> <bmx-notification-center id="nc-ops" searchable> <a slot="footer" href="#nc-ops" class="nc-footer-link">See all activity</a> </bmx-notification-center>
In place, as an activity feed
The same element drawn in the page rather than behind a bell - for an activity page or a dashboard panel. Start the live feed and a delivery's progress arrives a message at a time, the urgent one announced at once.
Get the code
<script src="/assets/bmx-components.min.js"></script> <bmx-notification-center id="nc-feed" mode="inline" hide-settings label="Delivery activity" style="inline-size: 100%; max-inline-size: 36rem"></bmx-notification-center>