logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.3.2
  • Components Overview
  • General
    • Button
    • Icon
    • Typography
  • Layout
    • Divider
    • Grid
    • Layout
    • Space
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • 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
    • Segmented
    • Statistic
    • Table
    • Tabs
    • Tag
    • Timeline
    • Tooltip
    • Tour
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
  • Other
    • Affix
    • App
    • ConfigProvider
    • FloatButton
    • Watermark
When To Use
Examples
Basic
More types
Closable
Description
Icon
Customized Close Text
Banner
Loop Banner
Smoothly Unmount
ErrorBoundary
Custom action
API
Alert.ErrorBoundary

Alert

TreeDrawer

Resources

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

Community

Awesome Ant Design
Medium
Twitter
yuqueAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconfSEE Conf-Experience Tech Conference

Help

GitHub
Change Log
FAQ
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTechMore Products

yuqueYuQue-Document Collaboration Platform
AntVAntV-Data Visualization
EggEgg-Enterprise Node.js Framework
kitchenKitchen-Sketch Toolkit
xtechAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community

Alert component for feedback.

When To Use

  • When you need to show alert messages to users.
  • When you need a persistent static container which is closable by user actions.

Examples

Basic

The simplest usage for short messages.

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

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

export default App;
Closable

To show close button.

expand codeexpand code
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;
Icon

A relevant icon will make information clearer and more friendly.

expand codeexpand code
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;
Banner

Display Alert as a banner at top of page.

expand codeexpand code
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;
Smoothly Unmount

Smoothly unmount Alert upon close.

expand codeexpand code
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;
Custom action

Custom action.

expand codeexpand code
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;
More types

There are 4 types of Alert: success, info, warning, error.

expand codeexpand code
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;
Description

Additional description for alert message.

expand codeexpand code
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;
Customized Close Text

Replace the default icon with customized text.

expand codeexpand code
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;
Loop Banner

Show a loop banner by using with react-text-loop-next or react-fast-marquee.

expand codeexpand code
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;
ErrorBoundary

ErrorBoundary Component for making error handling easier in React.

expand codeexpand code
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

PropertyDescriptionTypeDefaultVersion
actionThe action of AlertReactNode-4.9.0
afterCloseCalled when close animation is finished() => void-
bannerWhether to show as bannerbooleanfalse
closableWhether Alert can be closedboolean-
closeTextClose text to showReactNode-
closeIconCustom close iconReactNode<CloseOutlined />4.18.0
descriptionAdditional content of AlertReactNode-
iconCustom icon, effective when showIcon is trueReactNode-
messageContent of AlertReactNode-
showIconWhether to show iconbooleanfalse, in banner mode default is true
typeType of Alert styles, options: success, info, warning, errorstringinfo, in banner mode default is warning
onCloseCallback when Alert is closed(e: MouseEvent) => void-

Alert.ErrorBoundary

PropertyDescriptionTypeDefaultVersion
descriptionCustom error description to showReactNode{{ error stack }}
messageCustom error message to showReactNode{{ error }}
Success Text
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
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.
Alert Message Text

click the close button to see the effect

Success Tips
Error Text
Error Description Error Description Error Description Error Description
Warning Text
Info Text
Info Description Info Description Info Description Info Description
Success Text
Info Text
Warning Text
Error Text
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
Info Text