All components (244)

Notification center

Surfaces · NotificationCenter

What it is and when to use it

The notification center of an application: the whole history, grouped by day or type, with an unread filter, mark as read or unread, delete and each notification's own actions.

When to use it

The page or panel of "all notifications", behind the bell of NotificationTray.
items are the notifications (title, detail, date, read, tone, type, link, actions). Each action appears only if its function is passed: onReadChange, onMarkAllRead, onRemove, onClear (with confirmation), onAction, onOpen.
groupBy: by day (Today, Yesterday and the date), by type or not grouped.
useNotificationCenter(key) saves the history in the browser. For the ephemeral notifications of NotificationProvider to end up here, onShow is passed to the provider.

When not to

A notification that goes away by itself after a few seconds: NotificationProvider.
The latest news under a bell: NotificationTray.

Keyboard: they are normal buttons and links; the filter is a radio group.

Accessibility: an unread notification says so with a word as well as the colour stripe; each button names the notification it touches and the unread count is announced.

Fine appearance: the tone of each notification sets its icon; the groups carry a title above their list.

What it looks like

AllUnread (2)

2 unread

Order #1042 shippedUnread
Ships today with Correos.
4 days ago
Payment waiting for reviewUnread
Order #1043 is waiting for confirmation.
4 days ago
New customer
Lucía Ferrer has signed up.
5 days ago

No actions yet.

<NotificationCenter
  label="Alerts"
  items={avisos}
  groupBy="day"
  onReadChange={marcarLeido}
  onMarkAllRead={marcarTodos}
  onRemove={quitar}
  onClear={vaciar}
  onAction={ejecutarAccion}
/>

Props

Import it with import { NotificationCenter } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`items`required	`readonly CenterNotification[]`	—
`label`required	`string`	Which center it is («Notifications»). Required.
`className`	`string`	Merged with the library classes; it does not replace them.
`groupBy`	`CenterGrouping`	How they are grouped: by day (Today, Yesterday, the date), by type or not grouped. By day by default.
`headingLevel`	`CenterHeadingLevel`	—
`onAction`	`(key: string, action: string) => void`	A notification's own action («See order», «Retry»). It receives the notification's key and the action's.
`onClear`	`() => void`	Delete all, with confirmation.
`onMarkAllRead`	`() => void`	—
`onOpen`	`(key: string) => void`	When a notification with a link is opened. By default it only navigates; usually it is marked as read.
`onReadChange`	`(key: string, read: boolean) => void`	Mark one as read or unread. Without it the buttons do not appear.
`onRemove`	`(key: string) => void`	—

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: