# Notification

- Page: https://jiguang132.com/resources/ant-design/docs/notification
- Resource: Ant Design (https://jiguang132.com/resources/ant-design.md)
- All guides: https://jiguang132.com/resources/ant-design/docs.md

Prompt 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


- Hooks usage (recommended) · `hooks`
- Duration after which the notification box is closed · `duration`
- Notification with icon · `with-icon`
- Custom close button · `with-btn`
- Customized Icon · `custom-icon`
- Placement · `placement`
- Update Message Content · `update`
- Stack · `stack`
- Show with progress · `show-with-progress`
- Static Method (deprecated) · `basic`
- Customize progress bar color · `progress-color`


- Custom semantic styles · `style-class`

## API

Common props ref：[Common props](#jguang-common-props)

- `notification.success(config)`
- `notification.error(config)`
- `notification.info(config)`
- `notification.warning(config)`
- `notification.open(config)`
- `notification.destroy(key?: String)`

The properties of config are as follows:

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| actions | Customized button group | ReactNode | - | 5.24.0 | × |
| ~~btn~~ | Customized close button group, please use `actions` instead | ReactNode | - | - | × |
| className | Customized CSS class | string | - | - | 5.7.0 |
| classNames | Customize class for each semantic structure inside the component. Supports object or function. | Record<[SemanticDOM](#semantic-dom), string> \| (info: { props })=> Record<[SemanticDOM](#semantic-dom), string> | - |  | 6.0.0 |
| closable | Whether to show the close button | boolean \| [ClosableType](#closabletype) | true | - | × |
| closeIcon | Custom close icon | ReactNode | true | 5.7.0: close button will be hidden when setting to null or false | 5.14.0 |
| description | The content of notification box (required) | ReactNode | - | - | × |
| duration | Time in seconds before Notification is closed. When set to `0` or `false`, it will never be closed automatically | number \| false | 4.5 | - | × |
| showProgress | Show progress bar for auto-closing notification | boolean |  | 5.18.0 | × |
| pauseOnHover | keep the timer running or not on hover | boolean | true | 5.18.0 | × |
| icon | Customized icon | ReactNode | - | - | × |
| key | The unique identifier of the Notification | string | - | - | × |
| title | The title of notification box | ReactNode | - | 6.0.0 | × |
| ~~message~~ | The title of notification box (deprecated), please use `title` instead | ReactNode | - | - | × |
| placement | Position of Notification, can be one of `top` \| `topLeft` \| `topRight` \| `bottom` \| `bottomLeft` \| `bottomRight` | string | `topRight` | - | × |
| role | The semantics of notification content recognized by screen readers. The default value is `alert`. When set as the default value, the screen reader will promptly interrupt any ongoing content reading and prioritize the notification content for immediate attention. | `alert \| status` | `alert` | 5.6.0 | × |
| style | Customized inline style | [CSSProperties](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/e434515761b36830c3e58a970abf5186f005adac/types/react/index.d.ts#L794) | - | - | 5.7.0 |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record<[SemanticDOM](#semantic-dom), CSSProperties> \| (info: { props })=> Record<[SemanticDOM](#semantic-dom), CSSProperties> | - |  | 6.0.0 |
| onClick | Specify a function that will be called when the notification is clicked | function | - | - | × |
| onClose | Trigger when notification closed | function | - | - | × |
| props | An object that can contain `data-*`, `aria-*`, or `role` props, to be put on the notification `div`. This currently only allows `data-testid` instead of `data-*` in TypeScript. See https://github.com/microsoft/TypeScript/issues/28960. | Object | - | - | × |

- `notification.useNotification(config)`

The properties of config are as follows:

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| bottom | Distance from the bottom of the viewport, when `placement` is `bottom` `bottomRight` or `bottomLeft` (unit: pixels) | number | 24 |  | × |
| closeIcon | Custom close icon | ReactNode | true | 5.7.0: close button will be hidden when setting to null or false | 5.14.0 |
| getContainer | Return the mount node for Notification | () => HTMLNode | () => document.body |  | × |
| placement | Position of Notification, can be one of `top` \| `topLeft` \| `topRight` \| `bottom` \| `bottomLeft` \| `bottomRight` | string | `topRight` |  | × |
| showProgress | Show progress bar for auto-closing notification | boolean |  | 5.18.0 | × |
| pauseOnHover | keep the timer running or not on hover | boolean | true | 5.18.0 | × |
| rtl | Whether to enable RTL mode | boolean | false |  | × |
| stack | Notifications will be stacked when amount is over threshold | boolean \| `{ threshold: number }` | `{ threshold: 3 }` | 5.10.0 | × |
| top | Distance from the top of the viewport, when `placement` is `top` `topRight` or `topLeft` (unit: pixels) | number | 24 |  | × |
| maxCount | Max Notification show, drop oldest if exceed limit | number | - | 4.17.0 | × |

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

### ClosableType

| Property  | Description                     | Type      | Default   | Version |
| --------- | ------------------------------- | --------- | --------- | ------- |
| closeIcon | Custom close icon               | ReactNode | undefined | -       |
| onClose   | Trigger when notification close | Function  | -         | -       |

### Global configuration

`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

```js
notification.config({
  placement: 'bottomRight',
  bottom: 50,
  duration: 3,
  rtl: true,
});
```

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| bottom | Distance from the bottom of the viewport, when `placement` is `bottom` `bottomRight` or `bottomLeft` (unit: pixels) | number | 24 |  |
| closeIcon | Custom close icon | ReactNode | true | 5.7.0: close button will be hidden when setting to null or false |
| duration | Time in seconds before Notification is closed. When set to 0 or null, it will never be closed automatically | number | 4.5 |  |
| getContainer | Return the mount node for Notification, but still display at fullScreen | () => HTMLNode | () => document.body |  |
| placement | Position of Notification, can be one of `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` | string | `topRight` |  |
| showProgress | Show progress bar for auto-closing notification | boolean |  | 5.18.0 |
| pauseOnHover | keep the timer running or not on hover | boolean | true | 5.18.0 |
| rtl | Whether to enable RTL mode | boolean | false |  |
| top | Distance from the top of the viewport, when `placement` is `top` `topRight` or `topLeft` (unit: pixels) | number | 24 |  |
| maxCount | Max Notification show, drop oldest if exceed limit | number | - | 4.17.0 |

## Semantic DOM


| Semantic node | Native description | Version |
| --- | --- | --- |
| `root` | Notice root element, set background color, border radius, shadow, padding and animation styles | 6.0.0 |
| `wrapper` | Wrapper element for icon and content with content layout styles | 6.4.0 |
| `icon` | Icon element, set absolute positioning, font size, line height and status color styles | 6.0.0 |
| `section` | Content section element that contains title and description | 6.4.0 |
| `title` | Title element, set color, font size, line height and margin styles | 6.0.0 |
| `description` | Description element, set font size, color and margin styles | 6.0.0 |
| `close` | Close button element, set position, size and interaction styles | 6.4.0 |
| `actions` | Actions element, set float right, top margin and action button layout styles | 6.0.0 |
| `progress` | Progress element, set progress styles for auto-closing notifications | 6.4.0 |
| `list` | Notification list root element, set positioning, z-index, width, scroll area and placement styles | 6.4.0 |
| `listContent` | Notification list content element, set notice layout, gap and height transition styles | 6.4.0 |

Semantic description source: `vendor/components/notification/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.

| Token | Type | Native description |
| --- | --- | --- |
| `zIndexPopup` | `number` | z-index of Notification |
| `width` | `number \| string` | Width of Notification |
| `progressBg` | `string` | Background color of Notification progress bar |
| `colorSuccessBg?` | `string` | Background color of success notification container |
| `colorErrorBg?` | `string` | Background color of error notification container |
| `colorInfoBg?` | `string` | Background color of info notification container |
| `colorWarningBg?` | `string` | Background color of warning notification container |

Declaration source: `vendor/components/notification/style/index.ts`

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

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

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

import { resetComponent } from '../../style';

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

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

import genNotificationStyle, { genPurePanelStyle } from './notification';

import genNotificationPlacementStyle from './placement';

type WidthKey<Token extends NotificationToken> = {
  [Key in keyof Token]: Token[Key] extends number | string ? Key : never;
}[keyof Token];

interface SharedStyleConfig<Token extends NotificationToken> {
  listWidthKey?: WidthKey<Token>;
  stackVisibleCount?: number;
  itemStyle?: GenerateStyle<Token>;
}

/** Component only token. Which will handle additional calculation of alias token */
export interface ComponentToken {
  /**
   * @desc 提醒框 z-index
   * @descEN z-index of Notification
   */
  zIndexPopup: number;
  /**
   * @desc 提醒框宽度
   * @descEN Width of Notification
   */
  width: number | string;
  /**
   * @desc 提醒框进度条背景色
   * @descEN Background color of Notification progress bar
   */
  progressBg: string;
  /**
   * @desc 成功提醒框容器背景色
   * @descEN Background color of success notification container
   */
  colorSuccessBg?: string;
  /**
   * @desc 错误提醒框容器背景色
   * @descEN Background color of error notification container
   */
  colorErrorBg?: string;
  /**
   * @desc 信息提醒框容器背景色
   * @descEN Background color of info notification container
   */
  colorInfoBg?: string;
  /**
   * @desc 警告提醒框容器背景色
   * @descEN Background color of warning notification container
   */
  colorWarningBg?: string;
}

/**
 * @desc Notification 组件的 Token
 * @descEN Token for Notification component
 */
export interface NotificationToken extends FullToken<'Notification'> {
  /**
   * @desc 提醒框背景色
   * @descEN Background color of Notification
   */
  notificationBg: string;
  /**
   * @desc 提醒框内边距
   * @descEN Padding of Notification
   */
  notificationPadding: string;
  /**
   * @desc 提醒框垂直内边距
   * @descEN Vertical padding of Notification
   */
  notificationPaddingVertical: number | string;
  /**
   * @desc 提醒框水平内边距
   * @descEN Horizontal padding of Notification
   */
  notificationPaddingHorizontal: number;
  /**
   * @desc 提醒框图标尺寸
   * @descEN Icon size of Notification
   */
  notificationIconSize: number | string;
  /**
   * @desc 提醒框关闭按钮尺寸
   * @descEN Close button size of Notification
   */
  notificationCloseButtonSize: number | string;
  /**
   * @desc 提醒框底部外边距
   * @descEN Bottom margin of Notification
   */
  notificationMarginBottom: number;
  /**
   * @desc 提醒框边缘外边距
   * @descEN Edge margin of Notification
   */
  notificationMarginEdge: number;
  /**
   * @desc 提醒框进度条高度
   * @descEN Height of Notification progress bar
   */
  notificationProgressHeight: number;
  /**
   * @desc 提醒框入场动画偏移
   * @descEN Motion offset of Notification
   */
  notificationMotionOffset: number;
}
```

## FAQ

### Why I can not access context, redux, ConfigProvider `locale/prefixCls/theme` in notification? {#faq-context-redux}

When you call notification methods, antd dynamically creates a React instance using `ReactDOM.render`, which runs in a different execution context than your original code.

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:

```tsx
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.

> [App wrapper component](/components/app) can be used to simplify the problem of `useNotification` and other methods that need to manually implant contextHolder.

### How to set static methods prefixCls ？ {#faq-set-prefix-cls}

You can config with [`ConfigProvider.config`](/components/config-provider#config)

### Why doesn't `style={{ width: 'max-content' }}` work on Notification? {#faq-notification-width}

Notification uses a fixed-width layout so the stacked card style can stay consistent. Because of this, intrinsic widths such as `max-content`, `min-content`, and `fit-content(...)` are not supported on the outer notification node.

If you need to customize the notification width, use the component token `width`:

```tsx
<ConfigProvider
  theme={{
    components: {
      Notification: {
        width: 480,
      },
    },
  }}
>
  <App />
</ConfigProvider>
```

If you only need the content to size itself, render your own ReactNode in `title` or `description`, and apply `max-content` to the inner node instead of the notification root.


## Shared native props {#jguang-common-props}


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

| Property | Description | Type | Default |
| --- | --- | --- | --- |
| style | The additional style | CSSProperties | - |
| className | The additional css class | string | - |
| rootClassName | ClassName on the root element | string | - |
| autoFocus | Auto focus when component mounted, only effective for focusable elements like forms, links, etc. | boolean | false |


## Install and reproduce an example

```bash
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/notification/PureList.tsx`
- `vendor/components/notification/PurePanel.tsx`
- `vendor/components/notification/hooks/useStackConfig.ts`
- `vendor/components/notification/index.tsx`
- `vendor/components/notification/interface.ts`
- `vendor/components/notification/style/index.ts`
- `vendor/components/notification/style/notification.ts`
- `vendor/components/notification/style/placement.ts`
- `vendor/components/notification/useNotification.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.

---

Index of all JGuang resources: https://jiguang132.com/llms.txt