Notification

To display a notification message globally.

When To Use#

To display a notification message at the four corner of the view port. Typically it can be used in the following cases:

  • A notification with complex content.

  • A notification providing a feedback based on the user interaction. Or it may show some details about upcoming steps the user may have to follow.

  • A notification that is pushed by the application.

Examples

Basic

The simplest usage that close the notification box after 4.5s.

import { Button, notification } from 'antd';

const openNotification = () => {
  notification.open({
    message: 'Notification Title',
    description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
  });
};

ReactDOM.render(
  <Button type="primary" onClick={openNotification}>Open the notification box</Button>
, mountNode);
Notification with icon

A notification box with a icon at the left side.

import { Button, notification } from 'antd';

const openNotificationWithIcon = (type) => {
  notification[type]({
    message: 'Notification Title',
    description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
  });
};

ReactDOM.render(
  <div>
    <Button onClick={() => openNotificationWithIcon('success')}>Success</Button>
    <Button onClick={() => openNotificationWithIcon('info')}>Info</Button>
    <Button onClick={() => openNotificationWithIcon('warning')}>Warning</Button>
    <Button onClick={() => openNotificationWithIcon('error')}>Error</Button>
  </div>
, mountNode);
Customized Icon

The icon can be customized to any react node.

import { Button, notification, Icon } from 'antd';

const openNotification = () => {
  notification.open({
    message: 'Notification Title',
    description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
    icon: <Icon type="smile-circle" style={{ color: '#108ee9' }} />,
  });
};

ReactDOM.render(
  <Button type="primary" onClick={openNotification}>Open the notification box</Button>
, mountNode);
Customized style

The style and className are available to customize Notification.

import { Button, notification } from 'antd';

const openNotification = () => {
  notification.open({
    message: 'Notification Title',
    description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
    style: {
      width: 600,
      marginLeft: 335 - 600,
    },
  });
};

ReactDOM.render(
  <Button type="primary" onClick={openNotification}>Open the notification box</Button>
, mountNode);
Duration after which the notification box is closed

Duration can be used to specify how long the notification stays open. After the duration time elapses, the notification closes automatically. If not specified, default value is 4.5 seconds. If you set the value to 0, the notification box will never close automatically.

import { Button, notification } from 'antd';

const openNotification = () => {
  const args = {
    message: 'Notification Title',
    description: 'I will never close automatically. I will be close automatically. I will never close automatically.',
    duration: 0,
  };
  notification.open(args);
};

ReactDOM.render(
  <Button type="primary" onClick={openNotification}>Open the notification box</Button>
, mountNode);
Custom close button

To customize the style or font of the close button.

import { Button, notification } from 'antd';

const close = () => {
  console.log('Notification was closed. Either the close button was clicked or duration time elapsed.');
};

const openNotification = () => {
  const key = `open${Date.now()}`;
  const btnClick = function () {
    // to hide notification box
    notification.close(key);
  };
  const btn = (
    <Button type="primary" size="small" onClick={btnClick}>
      Confirm
    </Button>
  );
  notification.open({
    message: 'Notification Title',
    description: 'A function will be be called after the notification is closed (automatically after the "duration" time of manually).',
    btn,
    key,
    onClose: close,
  });
};

ReactDOM.render(
  <Button type="primary" onClick={openNotification}>Open the notification box</Button>
, mountNode);
Placement

A notification box can pop up from topRight or bottomRight or bottomLeft or topLeft.

import { Button, Select, notification } from 'antd';

const { Option } = Select;
const options = ['topLeft', 'topRight', 'bottomLeft', 'bottomRight'];
const openNotification = () => {
  notification.open({
    message: 'Notification Title',
    description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
  });
};

ReactDOM.render(
  <div>
    <Select
      defaultValue="topRight"
      style={{ width: 120, marginRight: 10 }}
      onChange={(val) => {
        notification.config({
          placement: val,
        });
      }}
    >
      {options.map(val => <Option key={val} value={val}>{val}</Option>)}
    </Select>
    <Button
      type="primary"
      onClick={openNotification}
    >
      Open the notification box
    </Button>
  </div>
, mountNode);

API#

  • notification.success(config)

  • notification.error(config)

  • notification.info(config)

  • notification.warning(config)

  • notification.warn(config)

  • notification.close(key: String)

  • notification.destroy()

The properties of config are as follows:

PropertyDescriptionTypeDefault
messageThe title of notification box (required)string|ReactNode-
descriptionThe content of notification box (required)string|ReactNode-
classNameCustomized CSS classstring-
styleCustomized inline styleObject-
btnCustomized close buttonReactNode-
iconCustomized iconReactNode_
keyThe unique identifier of current notificationstring-
onCloseSpecify a function that will be called after clicking the default close buttonFunction-
durationA notification box is closed after 4.5s by default. When specifying duration to null or 0, it will never be closed automaticallynumber4.5
placementTo set the position, which can be one of topLeft topRight bottomLeft bottomRightstringtopRight

notification also provide a global config() method that can be used for specifying the default options. Once this method is used, all the notification boxes will take into account these globally defined options before displaying.

  • notification.config(options)

notification.config({
  placement: 'bottomRight',
  bottom: 50,
  duration: 3,
});
PropertyDescriptionTypeDefault
placementTo set the position, which can be one of topLeft topRight bottomLeft bottomRightstringtopRight
topOffset to top, when message pop up from topRight or topLeft (unit: pixels).number24
bottomOffset to bottom, when message pop up from bottomRight or bottomLeft (unit: pixels).number24
durationA duration to close notification automatically by default (unit: second)number4.5
getContainerspecify render container() => HTMLNode() => document.body
MessageProgress