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

• Hooks usage (recommended) · hooks
• Other types of message · other
• Customize duration · duration
• Stack · stack
• Message with loading indicator · loading
• Promise interface · thenable
• Custom semantic styles · style-class
• Update Message Content · update
• Static method (deprecated) · info

API

Common props ref：Common props

This component 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.loading(content, [duration], onClose)

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.loading(config)

The properties of config are as follows:

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',
});

Semantic DOM

Semantic description source: vendor/components/message/demo/_semantic.tsx

Design Token

Types, inheritance and declarations retain the pinned native source. Defaults are computed by the native theme and may be overridden by ConfigProvider; this table does not invent static defaults.

Declaration source: vendor/components/message/style/index.ts

import type { CSSProperties } from 'react';

import type { CSSObject } from '@ant-design/cssinjs';

import { unit } from '@ant-design/cssinjs';

import { CONTAINER_MAX_OFFSET } from '../../_util/hooks';

import { prepareNotificationToken, sharedGenerateStyle } from '../../notification/style';

import type { NotificationToken } from '../../notification/style';

import { genListItemSharedStyle } from '../../notification/style/notification';

import type { GenerateStyle, GenStyleFn, GetDefaultToken } from '../../theme/internal';

import { genStyleHooks, genSubStyleComponent, mergeToken } from '../../theme/internal';

/** Component only token. Which will handle additional calculation of alias token */
export interface ComponentToken {
  // Component token here
  /**
   * @desc 提示框 z-index
   * @descEN z-index of Message
   */
  zIndexPopup: number;
  /**
   * @desc 提示框背景色
   * @descEN Background color of Message
   */
  contentBg: string;
  /**
   * @desc 提示框内边距
   * @descEN Padding of Message
   */
  contentPadding: CSSProperties['padding'];
}

FAQ

Why I can not access context, redux, ConfigProvider locale/prefixCls/theme 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.

App Package Component can be used to simplify the problem of useMessage and other methods that need to manually implant contextHolder.

How to set static methods prefixCls ？

You can config with ConfigProvider.config

Shared native props

Tips: The following generic properties apply to most antd components; those not supported are described separately.

Install and reproduce an example

npm install antd@6.6.5 @ant-design/icons@6.3.4 dayjs@1.11.23

Use ConfigProvider and native App; configure dayjs locale separately. Each example lists its complete source files and additional pinned dependencies in View code. Example names select demos, not universal component props. See the resource setup guide for theme, locale and SSR.

Native type references

The source viewer includes unchanged native implementations and the following source declarations. Inherited types remain in their native packages. English source comments are preserved as code reference.

• vendor/components/message/PureList.tsx
• vendor/components/message/PurePanel.tsx
• vendor/components/message/index.tsx
• vendor/components/message/interface.ts
• vendor/components/message/style/index.ts
• vendor/components/message/useMessage.tsx

Source and license

https://github.com/ant-design/ant-design/tree/4a39f54842eade4e565ab336ef6097cd7e723cdd

Original bilingual prose and executable examples are retained. Website-only embeds and token tables are expanded locally. Ant Design is MIT; separately listed dependency notices also apply. Upload previews block outbound requests and do not provide a backend.