Notifications
Notifications show short updates about app processes at the on the screen.
- Notifications shouldn’t interrupt the user’s experience
- Usually appear at the bottom of the UI on mobile
- Usually appear at the top of the UI on desktop
- Can disappear on their own or remain on screen until the user takes action
- Can combine with badges to show the number of notifications
Example
Palettes
The notificaiton uses the state palettes to determine the color of the notification.
Badges
Badges can be used to show the number of notifications on any trigger.
Resources
| Name | Resource | Status |
|---|---|---|
| Figma | Design Kit (Figma) | Private |
On this page
- Users should be able to:
- Headings should be clear and concise and are required
- Descriptions should be clear and concise and are optional
Basic Usage
Behavior
Notifications appear without warning, but they don't block users from interacting with page content.
Notifications without actions can auto-dismiss after 8 seconds. Avoid using auto-dismissing notifications unless there's also inline feedback.
Notifications with actions must remain on the screen until the user takes an action on the notification, or dismisses it.
On this page
import { NotificationCenter, useNotificationCenter } from '@cerberus/react'Usage
Palettes
Just update the options.palette to change the theme of the notification.
Badges
Badges can be used to show the number of notifications on any trigger by using the data-notify and data-notify-count attributes.
Customization
Notification
You can use the Notification components to customize the styles.
API
export type NotificationCenterProps = PortalProps & { duration?: number}
export interface NotifyOptions { palette?: 'info' | 'success' | 'warning' | 'danger' heading: string id?: string description?: ReactNode onClose?: (e: MouseEvent<HTMLButtonElement>) => void}
export interface NotificationProviderValue { notify: (options: NotifyOptions) => void}
define function NotificationCenter(props: PropsWithChildren<NotificationCenterProps>): ReactNodeShow Method Options
The notify method accepts the following options:
| Name | Default | Description |
|---|---|---|
| palette | info | The palette variant used to theme the dialog. |
| heading | The heading of the dialog. | |
| id | The id of the dialog. | |
| description | null | The description of the dialog. |
| onClose | An optional callback that runs when the user closes the dialog. |
On this page
Use Cases
- Users should be able to:
- Be alerted, but not disrupted, when a notification appears
- Move focus to an actionable notification
- Take action on a notification using assistive technology
Interaction & Style
Notification with actions shouldn't auto-dismiss. This way, users can read and interact with it at their own pace.
Notification without actions can auto-dismiss after a sufficient amount of time, however this can still be inaccessible on web without additional feedback.
Each platform has its own requirements for auto-dismiss durations, however common acceptable durations are 8 seconds.
Keyboard Navigation
| Keys | Actions |
|---|---|
| Tab | Moves focus between interactive elements |
| Esc | ​Dismisses the snackbar when in focus |
On this page