logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.25.0
  • Components Overview
  • General
    • Button
    • FloatButton
      5.0.0
    • Icon
    • Typography
  • Layout
    • Divider
    • Flex
      5.10.0
    • Grid
    • Layout
    • Space
    • Splitter
      5.21.0
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
    • Tabs
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPicker
      5.5.0
    • DatePicker
    • Form
    • Input
    • InputNumber
    • Mentions
    • Radio
    • Rate
    • Select
    • Slider
    • Switch
    • TimePicker
    • Transfer
    • TreeSelect
    • Upload
  • Data Display
    • Avatar
    • Badge
    • Calendar
    • Card
    • Carousel
    • Collapse
    • Descriptions
    • Empty
    • Image
    • List
    • Popover
    • QRCode
      5.1.0
    • Segmented
    • Statistic
    • Table
    • Tag
    • Timeline
    • Tooltip
    • Tour
      5.0.0
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
      5.1.0
  • Other
    • Affix
    • App
      5.1.0
    • ConfigProvider
    • Util
      5.13.0

Message

Display global messages as feedback in response to user operations.
Importimport { message } from "antd";
Sourcecomponents/message
Docs
Edit this pageChangelog

Resources

Ant Design X
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
Ant Motion-Motion Solution
China Mirror 🇨🇳

Community

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconf logoSEE Conf-Experience Tech Conference

Help

GitHub
Change Log
FAQ
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTech logoMore Products

yuque logoYuQue-Document Collaboration Platform
AntV logoAntV-Data Visualization
Egg logoEgg-Enterprise Node.js Framework
Kitchen logoKitchen-Sketch Toolkit
Galacean logoGalacean-Interactive Graphics Solution
xtech logoAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community
loading

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

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)
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.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.

js
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, but still display at fullScreen() => 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 topstring | number8

Design Token

Component TokenHow to use?
Token NameDescriptionTypeDefault Value
contentBgBackground color of Messagestring#ffffff
contentPaddingPadding of Messageundefined | Padding<string | number>9px 12px
zIndexPopupz-index of Messagenumber2010
Global TokenHow to use?

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:

tsx
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

Hooks usage (recommended)

Use message.useMessage to get contextHolder with context accessible issue. Please note that, we recommend to use top level registration instead of message static method, because static method cannot consume context, and ConfigProvider data will not work.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Customize duration

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Promise interface

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Update Message Content

Update message content with unique key.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Other types of message

Messages of success, error and warning types.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Message with loading indicator

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Customized style

The style and className are available to customize Message.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Static method (deprecated)

Static methods cannot consume Context. Please use hooks first.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code