Notifications
A Notification is a passive status update that keeps users informed of system progress.
Used for this
- For a passive status update about user or system activity
Not for this
- For contextual feedback that may require action or decision, use an Alert instead
How to use it
Default
The typical usage of a Notification component.
Placement
There are 6 placement options available. The Notification occupies the
top-end position by default.
Type
Types indicate what kind of message is in the notification and help the user understand how to respond. They can be info, warning, error, or success.
Configuration
- Name9.0.0-next.26•View source•View on npm
- Installnpm install @zendeskgarden/react-notifications
- Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
- Importimport { Notification, ToastProvider } from '@zendeskgarden/react-notifications'
API
Notification
| Prop name | Type | Default | Description |
|---|---|---|---|
type | 'success' | 'warning' | 'error' | 'info' | Applies notification type styles |
Notification.Close
Extends ButtonHTMLAttributes<HTMLButtonElement>
Notification.Paragraph
Extends HTMLAttributes<HTMLParagraphElement>
Notification.Title
Extends HTMLAttributes<HTMLDivElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
isRegular | boolean | Applies regular (non-bold) font weight |
ToastProvider
| Prop name | Type | Default | Description |
|---|---|---|---|
limit | number | 4 | Limits the number of visible toasts |
placementProps | Partial<Record<'top' | 'bottom' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end', HTMLAttributes<HTMLDivElement>>> | {} | Passes placement-based customization props to the toast's parent element |
zIndex | number | Sets the z-index of the toast |