Notification

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

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

• notification.useNotification(config)

The properties of config are as follows:

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

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

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

Semantic DOM

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.

Declaration source: vendor/components/notification/style/index.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?

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:

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 can be used to simplify the problem of useNotification and other methods that need to manually implant contextHolder.

How to set static methods prefixCls ？

You can config with ConfigProvider.config

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

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:

<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

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