Notification list
Notifications for the bell popover and the notifications page.
<mm-notification-list filters>
<mm-notification-item notification-id="n_8841" type="schema_change"
heading="The schema of shop.orders.v2 changed"
message="Column refund_reason (varchar) was added and legacy_status was dropped."
target="shop.orders.v2" target-href="/assets/shop.orders.v2/schema" time="2026-10-27T09:35:00Z"></mm-notification-item>
</mm-notification-list>
Guidance
Notifications tell people what changed in the parts of the catalog they own or subscribe to: a
schema change on shop.orders.v2, a mention in a glossary comment, a finished plugin run, read
access about to expire. The same list fills the bell popover and the notifications page.
Unread notifications are marked three ways, never by colour alone: a small ink dot, a visually
hidden word "Unread" and a 600-weight title. With filters, an All, Unread and Read segmented
control filters the list in place. "Mark all as read" appears while anything is unread and fires
mm-read-all; unless that is cancelled, every item is marked read.
Keyboard: the notifications are one tab stop. Up and Down move between them, Home and End jump to
the first and last, and Enter opens one (mm-activate). The tab stop is the item's title link
(or button); from it, Tab reaches the target link and the "Mark as read" and "Delete" buttons. When an item is deleted, or marked read while the Unread filter
is on, focus moves to the next notification so keyboard users never lose their place.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
filters | filters | boolean | false | Shows the All, Unread and Read filter. |
filter | filter | NotificationFilter | 'all' | The current filter: all (default), unread or read. |
loading | loading | boolean | false | Placeholders while loading. |
error | error | string | '' | An error message, shown with a retry button. |
label | label | string | '' | Names the list. Defaults to "Notifications". |
now | now | number | undefined | The time relative times are measured from, as a timestamp. Defaults to now. |
Events
| Event | Detail | Description |
|---|---|---|
mm-read-all | CustomEvent<Record<string, never>> | "Mark all as read" was activated. Cancelable. |
mm-filter | CustomEvent<{ value: NotificationFilter }> | The filter changed. |
mm-retry | CustomEvent<Record<string, never>> | The retry button on the error was activated. |
Slots
| Slot | Description |
|---|---|
| Default | mm-notification-item elements, newest first. |
CSS parts
| Part | Description |
|---|---|
toolbar | The filter and "Mark all as read" row. |
Examples
Every state of mm-notification-list in Storybook, with keyboard and screen reader tests.