Notifications

Notifications show short updates about app processes at the on the screen.

1
import { NotificationCenter, toaster } from '@cerberus/react'

Usage

The NotificationCenter component is used to manage notifications in your application. It works together with the toaster object to display notifications.

Types

Just update the options.types to change the theme of the notification. The options are info, success, warning, error, and loading.

Badges

Badges can be used to show the number of notifications on any trigger by using the data-notify and data-notify-count attributes.

Small IconButton

Large IconButton

Primitives

You can utilize the primitive components to customize the toast notification.

Component	Description
NotificationProvider	The context provider for the toast notifications.
NotificationRoot	The context provider for the toast parts.
NotificationHeading	The title heading of the toast.
NotificationDescription	The description of the toast.
NotificationCloseTrigger	The close button of the toast.
NotificationActionTrigger	The action button of the toast.

API

Props

The NotificationCenter component is an abstraction of the primitives and doesn't accept any props.

`toaster`

The toaster object is used to create notifications and accepts the following options:

Name	Type	Description
type	string	The type of notification. Options are `info`, `success`, `warning`, `error`, and `loading`.
title	string	The title of the notification.
description	string	The description of the notification.
action	`ToasterAction`	The action object of the notification.
duration	number	A custom duration of the notification.
onClose	function	The callback function when the notification is closed.

`ToasterAction`

The ToasterAction object is used to create an action button for the notification and accepts the following options:

Name	Type	Description
label	string	The label of the action button.
onClick	function	The callback function when the action button is clicked.

Parts

The NotificationParts API is an Object containing the full family of components.

Name	Description
Root	The `NotificationRoot` component which is the Provider for the toast.
Heading	The `NotificationHeading` component which displays the heading title for the toast.
Description	The `NotificationDescription` component which displays the description for the toast.
CloseTrigger	The `NotificationCloseTrigger` component which displays the close button for the toast.
ActionTrigger	The `NotificationActionTrigger` component which displays the action button for the toast.

1
import { NotificationCenter, toaster } from '@cerberus/react'

Usage

The NotificationCenter component is used to manage notifications in your application. It works together with the toaster object to display notifications.

Types

Just update the options.types to change the theme of the notification. The options are info, success, warning, error, and loading.

Badges

Badges can be used to show the number of notifications on any trigger by using the data-notify and data-notify-count attributes.

Small IconButton

Large IconButton

Primitives

You can utilize the primitive components to customize the toast notification.

Component	Description
NotificationProvider	The context provider for the toast notifications.
NotificationRoot	The context provider for the toast parts.
NotificationHeading	The title heading of the toast.
NotificationDescription	The description of the toast.
NotificationCloseTrigger	The close button of the toast.
NotificationActionTrigger	The action button of the toast.

API

Props

The NotificationCenter component is an abstraction of the primitives and doesn't accept any props.

`toaster`

The toaster object is used to create notifications and accepts the following options:

Name	Type	Description
type	string	The type of notification. Options are `info`, `success`, `warning`, `error`, and `loading`.
title	string	The title of the notification.
description	string	The description of the notification.
action	`ToasterAction`	The action object of the notification.
duration	number	A custom duration of the notification.
onClose	function	The callback function when the notification is closed.

`ToasterAction`

The ToasterAction object is used to create an action button for the notification and accepts the following options:

Name	Type	Description
label	string	The label of the action button.
onClick	function	The callback function when the action button is clicked.

Parts

The NotificationParts API is an Object containing the full family of components.

Name	Description
Root	The `NotificationRoot` component which is the Provider for the toast.
Heading	The `NotificationHeading` component which displays the heading title for the toast.
Description	The `NotificationDescription` component which displays the description for the toast.
CloseTrigger	The `NotificationCloseTrigger` component which displays the close button for the toast.
ActionTrigger	The `NotificationActionTrigger` component which displays the action button for the toast.

1
import { NotificationCenter, toaster } from '@cerberus/react'

Usage

The NotificationCenter component is used to manage notifications in your application. It works together with the toaster object to display notifications.

Types

Just update the options.types to change the theme of the notification. The options are info, success, warning, error, and loading.

Badges

Badges can be used to show the number of notifications on any trigger by using the data-notify and data-notify-count attributes.

Small IconButton

Large IconButton

Primitives

You can utilize the primitive components to customize the toast notification.

Component	Description
NotificationProvider	The context provider for the toast notifications.
NotificationRoot	The context provider for the toast parts.
NotificationHeading	The title heading of the toast.
NotificationDescription	The description of the toast.
NotificationCloseTrigger	The close button of the toast.
NotificationActionTrigger	The action button of the toast.

API

Props

The NotificationCenter component is an abstraction of the primitives and doesn't accept any props.

`toaster`

The toaster object is used to create notifications and accepts the following options:

Name	Type	Description
type	string	The type of notification. Options are `info`, `success`, `warning`, `error`, and `loading`.
title	string	The title of the notification.
description	string	The description of the notification.
action	`ToasterAction`	The action object of the notification.
duration	number	A custom duration of the notification.
onClose	function	The callback function when the notification is closed.

`ToasterAction`

The ToasterAction object is used to create an action button for the notification and accepts the following options:

Name	Type	Description
label	string	The label of the action button.
onClick	function	The callback function when the action button is clicked.

Parts

The NotificationParts API is an Object containing the full family of components.

Name	Description
Root	The `NotificationRoot` component which is the Provider for the toast.
Heading	The `NotificationHeading` component which displays the heading title for the toast.
Description	The `NotificationDescription` component which displays the description for the toast.
CloseTrigger	The `NotificationCloseTrigger` component which displays the close button for the toast.
ActionTrigger	The `NotificationActionTrigger` component which displays the action button for the toast.

1
import { NotificationCenter, toaster } from '@cerberus/react'

Usage

The NotificationCenter component is used to manage notifications in your application. It works together with the toaster object to display notifications.

Types

Just update the options.types to change the theme of the notification. The options are info, success, warning, error, and loading.

Badges

Badges can be used to show the number of notifications on any trigger by using the data-notify and data-notify-count attributes.

Small IconButton

Large IconButton

Primitives

You can utilize the primitive components to customize the toast notification.

Component	Description
NotificationProvider	The context provider for the toast notifications.
NotificationRoot	The context provider for the toast parts.
NotificationHeading	The title heading of the toast.
NotificationDescription	The description of the toast.
NotificationCloseTrigger	The close button of the toast.
NotificationActionTrigger	The action button of the toast.

Name	Type	Description
type	string	The type of notification. Options are `info`, `success`, `warning`, `error`, and `loading`.
title	string	The title of the notification.
description	string	The description of the notification.
action	`ToasterAction`	The action object of the notification.
duration	number	A custom duration of the notification.
onClose	function	The callback function when the notification is closed.

`ToasterAction`

The ToasterAction object is used to create an action button for the notification and accepts the following options:

Name	Type	Description
label	string	The label of the action button.
onClick	function	The callback function when the action button is clicked.

Parts

The NotificationParts API is an Object containing the full family of components.

Name	Description
Root	The `NotificationRoot` component which is the Provider for the toast.
Heading	The `NotificationHeading` component which displays the heading title for the toast.
Description	The `NotificationDescription` component which displays the description for the toast.
CloseTrigger	The `NotificationCloseTrigger` component which displays the close button for the toast.
ActionTrigger	The `NotificationActionTrigger` component which displays the action button for the toast.