---
category: Components
type: Feedback
title: Message
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*JjZBT6N1MusAAAAAAAAAAAAADrJ8AQ/original
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*7qMTRoq3ZGkAAAAAAAAAAAAADrJ8AQ/original
---

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.

## 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)`

| Argument | Description                                                       | Type                          | Default |
| -------- | ----------------------------------------------------------------- | ----------------------------- | ------- |
| content  | content of the message                                            | string\| VNode \| () => VNode | -       |
| duration | time(seconds) before auto-dismiss, don't dismiss if set to 0      | number                        | 1.5     |
| onClose  | Specify a function that will be called when the message is closed | function                      | -       |

`afterClose` can be called in then-able 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.

- `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:

| Property | Description                                                        | Type                          | Default | Version |
| -------- | ------------------------------------------------------------------ | ----------------------------- | ------- | ------- |
| class    | Customized CSS class                                               | string                        | -       |         |
| content  | content of the message                                             | string\| VNode \| () => VNode | -       |         |
| duration | time(seconds) before auto-dismiss, don't dismiss if set to 0       | number                        | 3       |         |
| icon     | Customized Icon                                                    | VNode \| ()=> VNode           | -       |         |
| key      | The unique identifier of the Message                               | string\|number                | -       |         |
| style    | Customized inline style                                            | CSSProperties                 | -       |         |
| onClick  | Specify a function that will be called when the message is clicked | function                      | -       |         |
| onClose  | Specify a function that will be called when the message is closed  | function                      | -       |         |

### Global static methods

Methods for global configuration and destruction are also provided:

- `message.config(options)`
- `message.destroy()`
- `message.useMessage()`

#### message.config

```js
message.config({
  top: '100px',
  duration: 2,
  maxCount: 3,
  rtl: true,
  prefixCls: 'my-message',
})
```

| Argument     | Description                                   | Type              | Default             | Version |
| ------------ | --------------------------------------------- | ----------------- | ------------------- | ------- |
| duration     | time before auto-dismiss, in seconds          | number            | 1.5                 |         |
| getContainer | Return the mount node for Message             | () => HTMLElement | () => document.body |         |
| maxCount     | max message show, drop oldest if exceed limit | number            | -                   |         |
| prefixCls    | The prefix className of message node          | string            | `ant-message`       | 3.0     |
| rtl          | Whether to enable RTL mode                    | boolean           | false               | 3.0     |
| top          | distance from top                             | string            | `8px`               |         |

## FAQ

### Why I can not access context, Pinia, ConfigProvider `locale/prefixCls/theme` in message?

antdv will dynamic create Vue instance by `Vue.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:

```html
<template>
  <contextHolder />
  <!-- <component :is='contextHolder'/> -->
</template>
<script setup>
  import { message } from 'ant-design-vue'

  const [messageApi, contextHolder] = message.useMessage()
  messageApi.open({
    // ...
  })
</script>
```

**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](/components/app) 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`](/components/config-provider#configproviderconfig-4130)
