Notification

Display a notification message globally.

When To Use#

To display a notification message at any of the four corners of the viewport. 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

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

expand codeexpand code
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.',
    onClick: () => {
      console.log('Notification Clicked!');
    },
  });
};

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

A notification box with a icon at the left side.

expand codeexpand code
import { Button, notification, Space } 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(
  <Space>
    <Button onClick={() => openNotificationWithIcon('success')}>Success</Button>
    <Button onClick={() => openNotificationWithIcon('info')}>Info</Button>
    <Button onClick={() => openNotificationWithIcon('warning')}>Warning</Button>
    <Button onClick={() => openNotificationWithIcon('error')}>Error</Button>
  </Space>,
  mountNode,
);

The icon can be customized to any react node.

expand codeexpand code
import { Button, notification } from 'antd';
import { SmileOutlined } from '@ant-design/icons';

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: <SmileOutlined style={{ color: '#108ee9' }} />,
  });
};

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

The style and className are available to customize Notification.

expand codeexpand code
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.',
    className: 'custom-class',
    style: {
      width: 600,
    },
  });
};

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

Use notification.useNotification to get contextHolder with context accessible issue.

expand codeexpand code
import { Button, notification, Divider, Space } from 'antd';
import {
  RadiusUpleftOutlined,
  RadiusUprightOutlined,
  RadiusBottomleftOutlined,
  RadiusBottomrightOutlined,
} from '@ant-design/icons';

const Context = React.createContext({ name: 'Default' });

const Demo = () => {
  const [api, contextHolder] = notification.useNotification();

  const openNotification = placement => {
    api.info({
      message: `Notification ${placement}`,
      description: <Context.Consumer>{({ name }) => `Hello, ${name}!`}</Context.Consumer>,
      placement,
    });
  };

  return (
    <Context.Provider value={{ name: 'Ant Design' }}>
      {contextHolder}
      <Space>
        <Button type="primary" onClick={() => openNotification('topLeft')}>
          <RadiusUpleftOutlined />
          topLeft
        </Button>
        <Button type="primary" onClick={() => openNotification('topRight')}>
          <RadiusUprightOutlined />
          topRight
        </Button>
      </Space>
      <Divider />
      <Space>
        <Button type="primary" onClick={() => openNotification('bottomLeft')}>
          <RadiusBottomleftOutlined />
          bottomLeft
        </Button>
        <Button type="primary" onClick={() => openNotification('bottomRight')}>
          <RadiusBottomrightOutlined />
          bottomRight
        </Button>
      </Space>
    </Context.Provider>
  );
};

ReactDOM.render(<Demo />, mountNode);

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.

expand codeexpand code
import { Button, notification } from 'antd';

const openNotification = () => {
  const args = {
    message: 'Notification Title',
    description:
      'I will never close automatically. This is a purposely very very long description that has many many characters and words.',
    duration: 0,
  };
  notification.open(args);
};

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

To customize the style or font of the close button.

expand codeexpand code
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 btn = (
    <Button type="primary" size="small" onClick={() => notification.close(key)}>
      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,
);

A notification box can appear from the topRight, bottomRight, bottomLeft or topLeft of the viewport.

expand codeexpand code
import { Button, notification, Divider, Space } from 'antd';
import {
  RadiusUpleftOutlined,
  RadiusUprightOutlined,
  RadiusBottomleftOutlined,
  RadiusBottomrightOutlined,
} from '@ant-design/icons';

const openNotification = placement => {
  notification.info({
    message: `Notification ${placement}`,
    description:
      'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
    placement,
  });
};

ReactDOM.render(
  <div>
    <Space>
      <Button type="primary" onClick={() => openNotification('topLeft')}>
        <RadiusUpleftOutlined />
        topLeft
      </Button>
      <Button type="primary" onClick={() => openNotification('topRight')}>
        <RadiusUprightOutlined />
        topRight
      </Button>
    </Space>
    <Divider />
    <Space>
      <Button type="primary" onClick={() => openNotification('bottomLeft')}>
        <RadiusBottomleftOutlined />
        bottomLeft
      </Button>
      <Button type="primary" onClick={() => openNotification('bottomRight')}>
        <RadiusBottomrightOutlined />
        bottomRight
      </Button>
    </Space>
  </div>,
  mountNode,
);

Update content with unique key.

expand codeexpand code
import { Button, notification } from 'antd';

const key = 'updatable';

const openNotification = () => {
  notification.open({
    key,
    message: 'Notification Title',
    description: 'description.',
  });
  setTimeout(() => {
    notification.open({
      key,
      message: 'New Title',
      description: 'New description.',
    });
  }, 1000);
};

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

API#

  • notification.success(config)

  • notification.error(config)

  • notification.info(config)

  • notification.warning(config)

  • notification.warn(config)

  • notification.open(config)

  • notification.close(key: String)

  • notification.destroy()

The properties of config are as follows:

PropertyDescriptionTypeDefault
bottomDistance from the bottom of the viewport, when placement is bottomRight or bottomLeft (unit: pixels).number24
btnCustomized close buttonReactNode-
classNameCustomized CSS classstring-
descriptionThe content of notification box (required)string|ReactNode-
durationTime in seconds before Notification is closed. When set to 0 or null, it will never be closed automaticallynumber4.5
getContainerReturn the mount node for Notification() => HTMLNode() => document.body
iconCustomized iconReactNode-
closeIconcustom close iconReactNode-
keyThe unique identifier of the Notificationstring-
messageThe title of notification box (required)string|ReactNode-
onCloseTrigger when notification closedFunction-
onClickSpecify a function that will be called when the notification is clickedFunction-
placementPosition of Notification, can be one of topLeft topRight bottomLeft bottomRightstringtopRight
styleCustomized inline styleReact.CSSProperties-
topDistance from the top of the viewport, when placement is topRight or topLeft (unit: pixels).number24

notification also provides 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 when displaying.

  • notification.config(options)

    When you use ConfigProvider for global configuration, the system will automatically start RTL mode by default.(4.3.0+)

    When you want to use it alone, you can start the RTL mode through the following settings.

notification.config({
  placement: 'bottomRight',
  bottom: 50,
  duration: 3,
  rtl: true,
});
PropertyDescriptionTypeDefault
bottomDistance from the bottom of the viewport, when placement is bottomRight or bottomLeft (unit: pixels).number24
closeIconcustom close iconReactNode-
durationTime in seconds before Notification is closed. When set to 0 or null, it will never be closed automaticallynumber4.5
getContainerReturn the mount node for Notification() => HTMLNode() => document.body
placementPosition of Notification, can be one of topLeft topRight bottomLeft bottomRightstringtopRight
topDistance from the top of the viewport, when placement is topRight or topLeft (unit: pixels).number24
rtlwhether to enable RTL modebooleanfalse

FAQ#

Why I can not access context, redux in notification?#

antd will dynamic create React instance by ReactDOM.render when call notification methods. Whose context is different with origin code located context.

When you need context info (like ConfigProvider context), you can use notification.useNotification to get api instance and contextHolder node. And put it in your children:

const [api, contextHolder] = notification.useNotification();

return (
  <Context1.Provider value="Ant">
    {/* contextHolder is inside Context1 which means api will get value of Context1 */}
    {contextHolder}
    <Context2.Provider value="Design">
      {/* contextHolder is outside Context2 which means api will **not** get value of Context2 */}
    </Context2.Provider>
  </Context1.Provider>
);

Note: You must insert contextHolder into your children with hooks. You can use origin method if you do not need context connection.

MessageProgress