Notification

Used for system notifications. Generally used to push messages.

Import

MainIndividual
import { Notification } from 'rsuite';

Examples

Basic

Default notification style.

Types

Set different notification types using the type prop: info, success, warning, and error.

Closeable

Add a close button with the closable prop and handle the close event with onClose callback.

With toaster

Demonstrates how to use the Notification component with toaster to display notification messages.

Note: useToaster must be used inside a CustomProvider. If your application is not wrapped with CustomProvider, make sure to wrap your app with <CustomProvider> before using useToaster.

Props

<Notification>

Property Type (Default) Description
children * ReactNode The description of the message box
closable boolean The remove button is displayed.
header * string The title of the message box
onClose () => void Callback after the message is removed
placement Placement('topCenter') The placement of the message box.
type 'info' | 'success' | 'warning' | 'error' The type of the message box.

Placement 

type Placement = 'topStart' | 'topCenter' | 'topEnd' | 'bottomStart' | 'bottomCenter' | 'bottomEnd';