Message

Display global messages as feedback in response to user operations.

When To Use#

  • To provide feedback such as success, warning, error etc.

  • A message is displayed at top and center and will be dismissed automatically, as a non-interrupting light-weighted prompt.

Examples

Normal message for information.

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

const info = () => {
  message.info('This is a normal message');
};

ReactDOM.render(
  <Button type="primary" onClick={info}>
    Display normal message
  </Button>,
  mountNode,
);

Customize message display duration from default 3s to 10s.

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

const success = () => {
  message.success('This is a prompt message for success, and it will disappear in 10 seconds', 10);
};

ReactDOM.render(<Button onClick={success}>Customized display duration</Button>, mountNode);

message provides a promise interface for onClose. The above example will display a new message when the old message is about to close.

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

const success = () => {
  message
    .loading('Action in progress..', 2.5)
    .then(() => message.success('Loading finished', 2.5))
    .then(() => message.info('Loading finished is finished', 2.5));
};

ReactDOM.render(<Button onClick={success}>Display sequential messages</Button>, mountNode);

The style and className are available to customize Message.

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

const success = () => {
  message.success({
    content: 'This is a prompt message with custom className and style',
    className: 'custom-class',
    style: {
      marginTop: '20vh',
    },
  });
};

ReactDOM.render(<Button onClick={success}>Customized style</Button>, mountNode);

Messages of success, error and warning types.

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

const success = () => {
  message.success('This is a success message');
};

const error = () => {
  message.error('This is an error message');
};

const warning = () => {
  message.warning('This is a warning message');
};

ReactDOM.render(
  <Space>
    <Button onClick={success}>Success</Button>
    <Button onClick={error}>Error</Button>
    <Button onClick={warning}>Warning</Button>
  </Space>,
  mountNode,
);

Display a global loading indicator, which is dismissed by itself asynchronously.

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

const success = () => {
  const hide = message.loading('Action in progress..', 0);
  // Dismiss manually and asynchronously
  setTimeout(hide, 2500);
};

ReactDOM.render(<Button onClick={success}>Display a loading indicator</Button>, mountNode);

Update message content with unique key.

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

const key = 'updatable';

const openMessage = () => {
  message.loading({ content: 'Loading...', key });
  setTimeout(() => {
    message.success({ content: 'Loaded!', key, duration: 2 });
  }, 1000);
};

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

Use message.useMessage to get contextHolder with context accessible issue.

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

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

function Demo() {
  const [messageApi, contextHolder] = message.useMessage();
  const info = () => {
    messageApi.open({
      type: 'info',
      content: <Context.Consumer>{({ name }) => `Hello, ${name}!`}</Context.Consumer>,
      duration: 1,
    });
  };

  return (
    <Context.Provider value={{ name: 'Ant Design' }}>
      {contextHolder}
      <Button type="primary" onClick={info}>
        Display normal message
      </Button>
    </Context.Provider>
  );
}

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

API#

This components provides some static methods, with usage and arguments as following:

  • message.success(content, [duration], onClose)

  • message.error(content, [duration], onClose)

  • message.info(content, [duration], onClose)

  • message.warning(content, [duration], onClose)

  • message.warn(content, [duration], onClose) // alias of warning

  • message.loading(content, [duration], onClose)

ArgumentDescriptionTypeDefault
contentThe content of the messageReactNode | config-
durationTime(seconds) before auto-dismiss, don't dismiss if set to 0number1.5
onCloseSpecify a function that will be called when the message is closedfunction-

afterClose can be called in thenable interface:

  • message[level](content, [duration]).then(afterClose)

  • message[level](content, [duration], onClose).then(afterClose)

where level refers one static methods of message. The result of then method will be a Promise.

Supports passing parameters wrapped in an object:

  • message.open(config)

  • message.success(config)

  • message.error(config)

  • message.info(config)

  • message.warning(config)

  • message.warn(config) // alias of warning

  • message.loading(config)

The properties of config are as follows:

PropertyDescriptionTypeDefault
classNameCustomized CSS classstring-
contentThe content of the messageReactNode-
durationTime(seconds) before auto-dismiss, don't dismiss if set to 0number3
iconCustomized IconReactNode-
keyThe unique identifier of the Messagestring | number-
styleCustomized inline styleCSSProperties-
onClickSpecify a function that will be called when the message is clickedfunction-
onCloseSpecify a function that will be called when the message is closedfunction-

Global static methods#

Methods for global configuration and destruction are also provided:

  • message.config(options)

  • message.destroy()

use message.destroy(key) to remove a message。

message.config#

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.

message.config({
  top: 100,
  duration: 2,
  maxCount: 3,
  rtl: true,
  prefixCls: 'my-message',
});
ArgumentDescriptionTypeDefaultVersion
durationTime before auto-dismiss, in secondsnumber3
getContainerReturn the mount node for Message() => HTMLElement() => document.body
maxCountMax message show, drop oldest if exceed limitnumber-
prefixClsThe prefix className of message nodestringant-message4.5.0
rtlWhether to enable RTL modebooleanfalse
topDistance from topnumber8

FAQ#

Why I can not access context, redux, ConfigProvider locale/prefixCls in message?#

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

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

const [api, contextHolder] = message.useMessage();

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.

How to set static methods prefixCls ?#

You can config with ConfigProvider.config