Notifications
A Notification is a passive status update that keeps users informed of system progress.
Table of Contents
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
- Name8.76.4•View source•View on npm
- Installnpm install @zendeskgarden/react-notifications
- Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
- Importimport { Notification, Close, Paragraph, Title, ToastProvider } from '@zendeskgarden/react-notifications'
API
Close
Extends ButtonHTMLAttributes<HTMLButtonElement>
Notification
Extends HTMLAttributes<HTMLDivElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
type | 'success' | 'warning' | 'error' | 'info' | – | Applies notification type styles |
Paragraph
Extends HTMLAttributes<HTMLParagraphElement>
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 |