Alert

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

Success Text

The simplest usage for short messages.

expand codeexpand code
import { Alert } from 'antd';

ReactDOM.render(<Alert message="Success Text" type="success" />, mountNode);
Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text
Error TextError Description Error Description Error Description Error Description Error Description Error Description

To show close button.

expand codeexpand code
import { Alert } from 'antd';

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

ReactDOM.render(
  <>
    <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}
    />
  </>,
  mountNode,
);
Success Tips
Informational Notes
Warning
Error
Success TipsDetailed description and advice about successful copywriting.
Informational NotesAdditional description and information about copywriting.
WarningThis is a warning notice about copywriting.
ErrorThis is an error message about copywriting.

A relevant icon will make information clearer and more friendly.

expand codeexpand code
import { Alert } from 'antd';

ReactDOM.render(
  <>
    <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
    />
  </>,
  mountNode,
);

Display Alert as a banner at top of page.

expand codeexpand code
import { Alert } from 'antd';

ReactDOM.render(
  <>
    <Alert message="Warning text" banner />
    <br />
    <Alert
      message="Very long warning text warning text text text text text text text"
      banner
      closable
    />
    <br />
    <Alert showIcon={false} message="Warning text without icon" banner />
    <br />
    <Alert type="error" message="Error text" banner />
  </>,
  mountNode,
);
Alert Message Text

placeholder text here

Smoothly unmount Alert upon close.

expand codeexpand code
import React, { useState } from 'react';
import { Alert } from 'antd';

const App: React.FC = () => {
  const [visible, setVisible] = useState(true);
  const handleClose = () => {
    setVisible(false);
  };
  return (
    <div>
      {visible ? (
        <Alert message="Alert Message Text" type="success" closable afterClose={handleClose} />
      ) : null}
      <p>placeholder text here</p>
    </div>
  );
};

ReactDOM.render(<App />, mountNode);
Success Text
Info Text
Warning Text
Error Text

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

expand codeexpand code
import { Alert } from 'antd';

ReactDOM.render(
  <>
    <Alert message="Success Text" type="success" />
    <Alert message="Info Text" type="info" />
    <Alert message="Warning Text" type="warning" />
    <Alert message="Error Text" type="error" />
  </>,
  mountNode,
);
Success TextSuccess Description Success Description Success Description
Info TextInfo Description Info Description Info Description Info Description
Warning TextWarning Description Warning Description Warning Description Warning Description
Error TextError Description Error Description Error Description Error Description

Additional description for alert message.

expand codeexpand code
import { Alert } from 'antd';

ReactDOM.render(
  <>
    <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"
    />
  </>,
  mountNode,
);
Info Text

Replace the default icon with customized text.

expand codeexpand code
import { Alert } from 'antd';

ReactDOM.render(<Alert message="Info Text" type="info" closeText="Close Now" />, mountNode);
Notice message one

Show a loop banner by using with react-text-loop.

expand codeexpand code
import { Alert } from 'antd';
import TextLoop from 'react-text-loop';

ReactDOM.render(
  <Alert
    banner
    message={
      <TextLoop mask>
        <div>Notice message one</div>
        <div>Notice message two</div>
        <div>Notice message three</div>
        <div>Notice message four</div>
      </TextLoop>
    }
  />,
  mountNode,
);

ErrorBoundary Component for making error handling easier in React.

expand codeexpand code
import React, { useState } from 'react';
import { Button, Alert } 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 type="danger" onClick={onClick}>
      Click me to throw a error
    </Button>
  );
};

ReactDOM.render(
  <ErrorBoundary>
    <ThrowError />
  </ErrorBoundary>,
  mountNode,
);

API#

PropertyDescriptionTypeDefault
afterCloseCalled when close animation is finished() => void-
bannerWhether to show as bannerbooleanfalse
closableWhether Alert can be closedboolean-
closeTextClose text to showstring | ReactNode-
descriptionAdditional content of Alertstring | ReactNode-
iconCustom icon, effective when showIcon is trueReactNode-
messageContent of Alertstring | ReactNode-
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
messageCustom error message to showReactNode{{ error }}
descriptionCustom error description to showReactNode{{ error stack }}
TableDrawer