组件 · 收件箱

NotificationCenter

The list that opens from the bell and holds the state of the whole server — a computer offline, a quota nearly full, an update — until it changes.

稳定也叫 Notifications

import { NotificationCenter } from "@botiverse/raft-ui";

本页尚未翻译

译文完成之前，这里显示英文原文。阅读英文版

The NotificationCenter is the list that opens from the bell. It holds the state of the whole server (a computer offline, a quota nearly full, an update) and keeps each notice until the situation changes. An attention dot on the bell says that something is unread.

When to use

Situation	Use
A problem or a change that affects the whole server	NotificationCenter
Something happened elsewhere that the person should see	Activity (ActivityInbox)
Something in one panel failed	`PanelNotice` under the panel header (Panel)
The result of an action the person took	Toast

Errors by scope are in Feedback. Where a product puts the bell is on the product's own page.

Anatomy

NotificationCenter: the root. A non-modal popover.
NotificationCenterTrigger: the bell. By default it draws the bell and the attention dot.
NotificationCenterPopup: the list's popup, next to the bell.
- NotificationCenterHeader: NotificationCenterTitle (Notifications) and NotificationCenterCount.
- NotificationCenterScroller and NotificationCenterList: the notices.
- NotificationCenterEmptyState: what the list says when it is empty (EmptyState).
NotificationCenterItem: one notice, in a NotificationCenterItemRow:
- NotificationCenterItemIcon: a tile with an icon. A notice from the system has no who, so a tile stands where an avatar would (InboxItem).
- NotificationCenterItemContent: NotificationCenterItemTitle, NotificationCenterItemBody and NotificationCenterItemActions with NotificationCenterActionButtons.

Variants

Variant	Use for
`status="error"` on the icon	Something stopped working: a computer offline, an agent that can't start. `warning-soft` tile, `octagon-alert` icon
`status="warning"`	Something will stop working soon: a quota nearly full, a key about to expire. `warning-soft` tile, `triangle-alert` icon
`status="info"`	News: an update. `info-soft` tile, `info` icon
`viewport="mobile"` on the popup	The narrower popup on a phone
`size` on the popup	The popup's height: `sm`, `md` or `lg`

States

State	Look
Unread (default)	The title in `foreground` at weight 700, and a pink attention dot on the right
`read`	The title in `foreground-muted` at weight 600; no dot

Behavior

Sort notices by severity: errors first, then warnings, then information.
When the person dismisses a notice, don't show it again until the situation changes.
Show the attention dot on the bell only while a notice is unread. The default trigger always draws the dot, so pass the bell alone as the trigger's children when nothing is unread.
Float the popup next to the bell; it doesn't take space in the layout (Elevation).

Content

Write the notice in the same order as an inbox item: where (the computer, the server), then what happened, then at most 2 lines of detail (InboxItem).

Accessibility

NotificationCenter wraps the Base UI Popover, non-modal by default; the popup doesn't take focus when it opens.
The popup is named "Notification center" and the list "Notifications" unless you pass another aria-label.
Give the trigger an accessible name, and include the unread state: aria-label="Notifications, 2 unread". The bell and the dot are hidden from assistive technology.
NotificationCenterItemIcon is an image (role="img") named by its status (Error, Warning, Info).

Rules

Make the actions in a notice ink-outline small buttons, never pink; NotificationCenterActionButton does this (InboxItem).
Use orange tiles for errors and warnings, not red (Color).

API