Notification

For global notifications, suspended in the corner of the page.

  • Notification.open Open a default notification.
  • Notification.info Open a info notification.
  • Notification.success Open a notification that means success information.
  • Notification.warning Open a notification that means warning information.
  • Notification.error Open a notification that means error information.
  • Notification.close Close a notification.
  • Notification.closeAll Close all notifications.

Usage

import { Notification } from 'rsuite';

Examples

Default

Message type

Placement

Custom

Close

Duration

Duration is an optional item. When set to 0, it is not automatically turned close.

Methods

Notification.open

Notification.open(props: NotificationProps);

Notification.info

Notification.info(props: NotificationProps);

Notification.success

Notification.success(props: NotificationProps);

Notification.warning

Notification.warning(props: NotificationProps);

Notification.error

Notification.error(props: NotificationProps);

Notification.close

Notification.close(key?: string);

Notification.closeAll

Notification.closeAll();

Types

interface NotificationProps {
  title: React.ReactNode;
  description: React.ReactNode;
  duration?: number;
  placement?: string;
  className?: string;
  style?: React.CSSProperties;
  top?: number;
  bottom?: number;
  key?: string;
  onClose?: () => void;
}
Property Type (Default) Description
bottom number (24) The distance from the bottom of the message box
description * React.Node The description of the message box
duration number (4500) message box duration (Unit: milliseconds)
key string The message box is uniquely identified, and you must fill out the field if you want to manually remove the message box.
onClose () => void Closes the callback function.
placement enum: NotificationPlacement('topEnd') The placement of the message box.
title * string The title of the message box
top number (24) The distance from the top of the message box

Related components

πŸŽ‰ v5 is released! Head to the v5 documentation to get started.