Alert警告提示

警告提示，展现需要关注的信息。

何时使用

当某个页面需要向用户显示警告的信息时。
非浮层的静态展现形式，始终展现，不会自动消失，用户可以点击关闭。

代码演示

Success Text

基本

最简单的用法，适用于简短的警告提示。

TypeScript
JavaScript
import React from 'react';
import { Alert } from 'antd';

const App: React.FC = () => <Alert message="Success Text" type="success" />;

export default App;

Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text

Error Text

Error Description Error Description Error Description Error Description Error Description Error Description

可关闭的警告提示

显示关闭按钮，点击可关闭警告提示。

TypeScript
JavaScript
import React from 'react';
import { Alert, Space } from 'antd';

const onClose = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
  console.log(e, 'I was closed.');
};

const App: React.FC = () => (
  <Space direction="vertical" style={{ width: '100%' }}>
    <Alert
      message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
      type="warning"
      closable
      onClose={onClose}
    />
    <Alert
      message="Error Text"
      description="Error Description Error Description Error Description Error Description Error Description Error Description"
      type="error"
      closable
      onClose={onClose}
    />
  </Space>
);

export default App;

Success Tips

Informational Notes

Warning

Error

Success Tips

Detailed description and advice about successful copywriting.

Informational Notes

Additional description and information about copywriting.

Warning

This is a warning notice about copywriting.

Error

This is an error message about copywriting.

图标

可口的图标让信息类型更加醒目。

TypeScript
JavaScript
import React from 'react';
import { Alert, Space } from 'antd';

const App: React.FC = () => (
  <Space direction="vertical" style={{ width: '100%' }}>
    <Alert message="Success Tips" type="success" showIcon />
    <Alert message="Informational Notes" type="info" showIcon />
    <Alert message="Warning" type="warning" showIcon closable />
    <Alert message="Error" type="error" showIcon />
    <Alert
      message="Success Tips"
      description="Detailed description and advice about successful copywriting."
      type="success"
      showIcon
    />
    <Alert
      message="Informational Notes"
      description="Additional description and information about copywriting."
      type="info"
      showIcon
    />
    <Alert
      message="Warning"
      description="This is a warning notice about copywriting."
      type="warning"
      showIcon
      closable
    />
    <Alert
      message="Error"
      description="This is an error message about copywriting."
      type="error"
      showIcon
    />
  </Space>
);

export default App;

顶部公告

页面顶部通告形式，默认有图标且 type 为 'warning'。

TypeScript
JavaScript
import React from 'react';
import { Alert, Space } from 'antd';

const App: React.FC = () => (
  <Space direction="vertical" style={{ width: '100%' }}>
    <Alert message="Warning text" banner />
    <Alert
      message="Very long warning text warning text text text text text text text"
      banner
      closable
    />
    <Alert showIcon={false} message="Warning text without icon" banner />
    <Alert type="error" message="Error text" banner />
  </Space>
);

export default App;

Alert Message Text

click the close button to see the effect

平滑地卸载

平滑、自然的卸载提示。

TypeScript
JavaScript
import React, { useState } from 'react';
import { Alert, Switch, Space } from 'antd';

const App: React.FC = () => {
  const [visible, setVisible] = useState(true);

  const handleClose = () => {
    setVisible(false);
  };

  return (
    <Space direction="vertical" style={{ width: '100%' }}>
      {visible && (
        <Alert message="Alert Message Text" type="success" closable afterClose={handleClose} />
      )}
      <p>click the close button to see the effect</p>
      <Switch onChange={setVisible} checked={visible} disabled={visible} />
    </Space>
  );
};

export default App;

Success Tips

Error Text

Error Description Error Description Error Description Error Description

Warning Text

Info Text

Info Description Info Description Info Description Info Description

操作

可以在右上角自定义操作项。

TypeScript
JavaScript
import React from 'react';
import { Alert, Button, Space } from 'antd';

const App: React.FC = () => (
  <Space direction="vertical" style={{ width: '100%' }}>
    <Alert
      message="Success Tips"
      type="success"
      showIcon
      action={
        <Button size="small" type="text">
          UNDO
        </Button>
      }
      closable
    />
    <Alert
      message="Error Text"
      showIcon
      description="Error Description Error Description Error Description Error Description"
      type="error"
      action={
        <Button size="small" danger>
          Detail
        </Button>
      }
    />
    <Alert
      message="Warning Text"
      type="warning"
      action={
        <Space>
          <Button size="small" type="ghost">
            Done
          </Button>
        </Space>
      }
      closable
    />
    <Alert
      message="Info Text"
      description="Info Description Info Description Info Description Info Description"
      type="info"
      action={
        <Space direction="vertical">
          <Button size="small" type="primary">
            Accept
          </Button>
          <Button size="small" danger type="ghost">
            Decline
          </Button>
        </Space>
      }
      closable
    />
  </Space>
);

export default App;

Success Text

Info Text

Warning Text

Error Text

四种样式

共有四种样式 success、info、warning、error。

TypeScript
JavaScript
import React from 'react';
import { Alert, Space } from 'antd';

const App: React.FC = () => (
  <Space direction="vertical" style={{ width: '100%' }}>
    <Alert message="Success Text" type="success" />
    <Alert message="Info Text" type="info" />
    <Alert message="Warning Text" type="warning" />
    <Alert message="Error Text" type="error" />
  </Space>
);

export default App;

Success Text

Success Description Success Description Success Description

Info Text

Info Description Info Description Info Description Info Description

Warning Text

Warning Description Warning Description Warning Description Warning Description

Error Text

Error Description Error Description Error Description Error Description

含有辅助性文字介绍

含有辅助性文字介绍的警告提示。

TypeScript
JavaScript
import React from 'react';
import { Alert, Space } from 'antd';

const App: React.FC = () => (
  <Space direction="vertical" style={{ width: '100%' }}>
    <Alert
      message="Success Text"
      description="Success Description Success Description Success Description"
      type="success"
    />
    <Alert
      message="Info Text"
      description="Info Description Info Description Info Description Info Description"
      type="info"
    />
    <Alert
      message="Warning Text"
      description="Warning Description Warning Description Warning Description Warning Description"
      type="warning"
    />
    <Alert
      message="Error Text"
      description="Error Description Error Description Error Description Error Description"
      type="error"
    />
  </Space>
);

export default App;

Info Text

自定义关闭

可以自定义关闭，自定义的文字会替换原先的关闭 Icon。

TypeScript
JavaScript
import React from 'react';
import { Alert } from 'antd';

const App: React.FC = () => <Alert message="Info Text" type="info" closeText="Close Now" />;

export default App;

轮播的公告

配合 react-text-loop-next 或 react-fast-marquee 实现消息轮播通知栏。

TypeScript
JavaScript
import React from 'react';
import { Alert } from 'antd';
import Marquee from 'react-fast-marquee';

const App: React.FC = () => (
  <Alert
    banner
    message={
      <Marquee pauseOnHover gradient={false}>
        I can be a React component, multiple React components, or just some text.
      </Marquee>
    }
  />
);

export default App;

React 错误处理

友好的 React 错误处理包裹组件。

TypeScript
JavaScript
import React, { useState } from 'react';
import { Alert, Button } from 'antd';

const { ErrorBoundary } = Alert;
const ThrowError: React.FC = () => {
  const [error, setError] = useState<Error>();
  const onClick = () => {
    setError(new Error('An Uncaught Error'));
  };

  if (error) {
    throw error;
  }
  return (
    <Button danger onClick={onClick}>
      Click me to throw a error
    </Button>
  );
};

const App: React.FC = () => (
  <ErrorBoundary>
    <ThrowError />
  </ErrorBoundary>
);

export default App;

API

参数	说明	类型	默认值	版本
action	自定义操作项	ReactNode	-	4.9.0
afterClose	关闭动画结束后触发的回调函数	() => void	-
banner	是否用作顶部公告	boolean	false
closable	默认不显示关闭按钮	boolean	-
closeText	自定义关闭按钮	ReactNode	-
closeIcon	自定义关闭 Icon	ReactNode	`<CloseOutlined />`	4.18.0
description	警告提示的辅助性文字介绍	ReactNode	-
icon	自定义图标，`showIcon` 为 true 时有效	ReactNode	-
message	警告提示内容	ReactNode	-
showIcon	是否显示辅助图标	boolean	false，`banner` 模式下默认值为 true
type	指定警告提示的样式，有四种选择 `success`、`info`、`warning`、`error`	string	`info`，`banner` 模式下默认值为 `warning`
onClose	关闭时触发的回调函数	(e: MouseEvent) => void	-

Alert.ErrorBoundary

参数	说明	类型	默认值	版本
description	自定义错误内容，如果未指定会展示报错堆栈	ReactNode	{{ error stack }}
message	自定义错误标题，如果未指定会展示原生报错信息	ReactNode	{{ error }}

import React from 'react'; import { Alert, Space } from 'antd'; const onClose = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => { console.log(e, 'I was closed.'); }; const App: React.FC = () => ( <Space direction="vertical" style={{ width: '100%' }}> <Alert message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text" type="warning" closable onClose={onClose} /> <Alert message="Error Text" description="Error Description Error Description Error Description Error Description Error Description Error Description" type="error" closable onClose={onClose} /> </Space> ); export default App;

import React from 'react'; import { Alert, Space } from 'antd'; const App: React.FC = () => ( <Space direction="vertical" style={{ width: '100%' }}> <Alert message="Success Tips" type="success" showIcon /> <Alert message="Informational Notes" type="info" showIcon /> <Alert message="Warning" type="warning" showIcon closable /> <Alert message="Error" type="error" showIcon /> <Alert message="Success Tips" description="Detailed description and advice about successful copywriting." type="success" showIcon /> <Alert message="Informational Notes" description="Additional description and information about copywriting." type="info" showIcon /> <Alert message="Warning" description="This is a warning notice about copywriting." type="warning" showIcon closable /> <Alert message="Error" description="This is an error message about copywriting." type="error" showIcon /> </Space> ); export default App;

import React from 'react'; import { Alert, Space } from 'antd'; const App: React.FC = () => ( <Space direction="vertical" style={{ width: '100%' }}> <Alert message="Warning text" banner /> <Alert message="Very long warning text warning text text text text text text text" banner closable /> <Alert showIcon={false} message="Warning text without icon" banner /> <Alert type="error" message="Error text" banner /> </Space> ); export default App;

import React, { useState } from 'react'; import { Alert, Switch, Space } from 'antd'; const App: React.FC = () => { const [visible, setVisible] = useState(true); const handleClose = () => { setVisible(false); }; return ( <Space direction="vertical" style={{ width: '100%' }}> {visible && ( <Alert message="Alert Message Text" type="success" closable afterClose={handleClose} /> )} <p>click the close button to see the effect</p> <Switch onChange={setVisible} checked={visible} disabled={visible} /> </Space> ); }; export default App;

import React from 'react'; import { Alert, Button, Space } from 'antd'; const App: React.FC = () => ( <Space direction="vertical" style={{ width: '100%' }}> <Alert message="Success Tips" type="success" showIcon action={ <Button size="small" type="text"> UNDO </Button> } closable /> <Alert message="Error Text" showIcon description="Error Description Error Description Error Description Error Description" type="error" action={ <Button size="small" danger> Detail </Button> } /> <Alert message="Warning Text" type="warning" action={ <Space> <Button size="small" type="ghost"> Done </Button> </Space> } closable /> <Alert message="Info Text" description="Info Description Info Description Info Description Info Description" type="info" action={ <Space direction="vertical"> <Button size="small" type="primary"> Accept </Button> <Button size="small" danger type="ghost"> Decline </Button> </Space> } closable /> </Space> ); export default App;

import React from 'react'; import { Alert, Space } from 'antd'; const App: React.FC = () => ( <Space direction="vertical" style={{ width: '100%' }}> <Alert message="Success Text" type="success" /> <Alert message="Info Text" type="info" /> <Alert message="Warning Text" type="warning" /> <Alert message="Error Text" type="error" /> </Space> ); export default App;

import React from 'react'; import { Alert, Space } from 'antd'; const App: React.FC = () => ( <Space direction="vertical" style={{ width: '100%' }}> <Alert message="Success Text" description="Success Description Success Description Success Description" type="success" /> <Alert message="Info Text" description="Info Description Info Description Info Description Info Description" type="info" /> <Alert message="Warning Text" description="Warning Description Warning Description Warning Description Warning Description" type="warning" /> <Alert message="Error Text" description="Error Description Error Description Error Description Error Description" type="error" /> </Space> ); export default App;

import React, { useState } from 'react'; import { Alert, Button } from 'antd'; const { ErrorBoundary } = Alert; const ThrowError: React.FC = () => { const [error, setError] = useState<Error>(); const onClick = () => { setError(new Error('An Uncaught Error')); }; if (error) { throw error; } return ( <Button danger onClick={onClick}> Click me to throw a error </Button> ); }; const App: React.FC = () => ( <ErrorBoundary> <ThrowError /> </ErrorBoundary> ); export default App;

API

参数	说明	类型	默认值	版本
action	自定义操作项	ReactNode	-	4.9.0
afterClose	关闭动画结束后触发的回调函数	() => void	-
banner	是否用作顶部公告	boolean	false
closable	默认不显示关闭按钮	boolean	-
closeText	自定义关闭按钮	ReactNode	-
closeIcon	自定义关闭 Icon	ReactNode	`<CloseOutlined />`	4.18.0
description	警告提示的辅助性文字介绍	ReactNode	-
icon	自定义图标，`showIcon` 为 true 时有效	ReactNode	-
message	警告提示内容	ReactNode	-
showIcon	是否显示辅助图标	boolean	false，`banner` 模式下默认值为 true
type	指定警告提示的样式，有四种选择 `success`、`info`、`warning`、`error`	string	`info`，`banner` 模式下默认值为 `warning`
onClose	关闭时触发的回调函数	(e: MouseEvent) => void	-

Alert.ErrorBoundary

参数	说明	类型	默认值	版本
description	自定义错误内容，如果未指定会展示报错堆栈	ReactNode	{{ error stack }}
message	自定义错误标题，如果未指定会展示原生报错信息	ReactNode	{{ error }}

Ant Design

Alert警告提示

Ant Design

Alert警告提示

何时使用

代码演示

API

Alert.ErrorBoundary

何时使用

代码演示

API

Alert.ErrorBoundary