'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Feedback
NotificationCenter
A bell with an unread count that opens the list of notifications: mark one or all as read, dismiss, go to the action. A panel under the bell, or a drawer on small screens.
import { NotificationCenter } from '@alea-design/ui';
Examples
Notification bell
A bell with the unread count; it opens the list. Mark one or all as read, dismiss, or go to the action.
Four tones
Info, success, warning and danger set the icon and its color; screen readers hear the tone before the title.
Empty state
With nothing to show, the panel says so. Every text is a label you can change.
Controlled
You own the list. Every change comes back through onChange and per-action callbacks; new unread notifications are announced to screen readers.
Styles with per-group CSS
With the single stylesheet import, @alea-design/ui/styles.css, nothing more is needed. If you import the stylesheets by group instead, NotificationCenter is styled by its own group: import @alea-design/ui/css/notification.css next to base.css. Without it the panel renders unstyled and looks broken.
The panel also draws a Button, a Badge, an EmptyState and a Popover or Drawer, so the button, display, data and overlay groups must be imported too. dist/css/groups.json lists them under requires for the notification group, and lists the components each group styles.
Tokens
The design tokens this component reads, with their value in the current theme. Override any of them to restyle it.
Color
--alea-accent…--alea-accent-subtle…--alea-border…--alea-status-danger…--alea-status-danger-bg…--alea-status-info…--alea-status-info-bg…--alea-status-success…--alea-status-success-bg…--alea-status-warning…--alea-status-warning-bg…--alea-surface-hover…--alea-text…--alea-text-muted…--alea-text-soft…
Space
--alea-space-1…--alea-space-2…--alea-space-3…--alea-space-4…--alea-space-6…--alea-space-8…
Radius
--alea-radius-full…
Type
--alea-font-family-body…--alea-font-size-md…--alea-font-size-sm…--alea-font-size-xs…--alea-font-weight-medium…--alea-font-weight-semibold…
Motion
--alea-motion-duration-base…--alea-motion-ease-in…--alea-motion-ease-out…
Component
--alea-focus-ring…
Props
NotificationCenter props
A bell with an unread count that opens the list of notifications: read one or all, dismiss, go to the action. A panel under the bell, or a drawer on small screens. You own the list; every change comes back through onChange. Arrow keys move between notifications, Escape closes and focus returns to the bell, and new unread notifications are announced.
| Prop | Type | Default | Description |
|---|---|---|---|
itemsrequired | NotificationItem[] | The notifications, newest first. The component never changes them: it reports every change. | |
announce | boolean | true | Announces new unread notifications to screen readers. Default true. |
className | string | none | Extra class names for the root element. |
defaultOpen | boolean | false | Starts open (uncontrolled). |
isOpen | boolean | false | Opens or closes the panel (controlled). |
labels | Partial<NotificationLabels> | none | Text overrides: the bell, the buttons, the empty state and the announcements. |
max | number | 99 | The badge shows max+ above this. Default 99. |
motion | MotionProp | none | How the panel enters and leaves: a preset, false for none, or options. |
onAction | ((item: NotificationItem) => void) | none | Called when a notification's action is pressed. |
onChange | ((items: NotificationItem[]) => void) | none | Called with the next list after any change (read, read all, dismiss). |
onDismiss | ((item: NotificationItem) => void) | none | Called with the notification that was dismissed. |
onMarkAllRead | ((items: NotificationItem[]) => void) | none | Called when "mark all as read" is pressed, with the notifications that were unread. |
onMarkRead | ((item: NotificationItem) => void) | none | Called with the notification that was marked as read. |
onOpenChange | ((isOpen: boolean) => void) | none | Called when the panel opens or closes. |
placement | "bottom end" | "bottom start" | "bottom" | "top" | "top start" | "top end" | "bottom end" | Where the popover opens. Default bottom end. |
presentation | "auto" | "popover" | "drawer" | "auto" | popover (a panel under the bell), drawer (a sheet from the bottom) or auto: a drawer on small screens. Default auto. |
Specs
Generated from the source: the variants in the types, the states and tokens in the CSS, and the motion patterns that apply. The grids render the real component in both themes; the numbers are measured from the page.
- Variants
placementbottom endbottom startbottomtoptop starttop endpresentationautopopoverdrawer- States
- Keyboard focusHover (CSS)
- Motion
- Takes a motion prop for its entrance and exit.
- Dark and light
- Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
- Styling hooks
.alea-notifs.alea-notifs-head.alea-notifs-title.alea-notifs-empty.alea-notifs-list.alea-notif-out.alea-notif.alea-notif-inner.alea-notif-icon.alea-notif-body.alea-notif-title.alea-notif-text- Data attributes
data-tone=successdata-tone=warningdata-tone=dangerdata-unread
Accessibility
- The bell is named with the count: "Notifications, 3 unread". The badge itself is hidden from screen readers so the count is not read twice.
- The panel is a dialog named by its title; Escape closes it and focus goes back to the bell.
- Each notification is a list item that says whether it is unread and its tone before the title.
- A new unread notification is announced politely, never on load and never for read ones.
- Times are time elements with the exact date; the relative text follows the locale and refreshes while the panel is open.
- Dismissing moves focus to the next notification, or to the empty state when it was the last one.
Keyboard
| Key | Does |
|---|---|
| Enter or Space | Opens the panel from the bell |
| Up or Down arrow | Previous or next notification |
| Home or End | First or last notification |
| Tab | Moves through the buttons of the current notification, then to the next control |
| Esc | Closes the panel and returns to the bell |
Do and don't
Do
- Keep titles short and put the detail in the description.
- Give every notification one action at most, and word it as a verb.
- Keep the list in your own state and update it from onChange.
Don't
- Don't use it for messages that need an answer right now: use Dialog or Alert.
- Don't color a notification by importance only; the tone also sets the icon and the spoken word.
In Figma
The properties of the Figma components, generated from the kit, so they always match it. The last column is the React prop each one stands for.
Notification item · 8 variants
| Figma property | Kind | Values | Default | React prop |
|---|---|---|---|---|
| Tone | Variant | Info, Success, Warning, Danger | Info | no React prop |
| Status | Variant | Unread, Read | Unread | no React prop |
| Title | Text | - | Deploy finished | no React prop |
| Description text | Text | - | The build is live on production. | no React prop |
| Time | Text | - | 8 min ago | no React prop |
| Action label | Text | - | View | no React prop |
| Description | Boolean | - | true | no React prop |
| Action | Boolean | - | true | no React prop |
Notification bell · 1 variants
| Figma property | Kind | Values | Default | React prop |
|---|---|---|---|---|
| Badge | Boolean | - | true | items |
| Open | Boolean | - | false | isOpen, defaultOpen |
Nested components exposed on it: Trigger, Badge
Notification center · 4 variants
| Figma property | Kind | Values | Default | React prop |
|---|---|---|---|---|
| Presentation | Variant | Popover, Drawer | Popover | presentation |
| Content | Variant | List, Empty | List | items |
| Empty title | Text | - | You are all caught up | labels |
| Empty description | Text | - | New notifications will show up here. | labels |