Alert

Alert component for feedback.

When To Use#

  • When you need to show alert messages for users.

  • When you need a persistent static container which is closable by user actions.

Examples

Success Text

The simplest usage for short messages.

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.

import { Alert } from 'antd';

const onClose = function (e) {
  console.log(e, 'I was closed.');
};

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

Decent icon make information more clear and more friendly.

import { Alert } from 'antd';

ReactDOM.render(<div>
  <Alert message="Success Tips" type="success" showIcon />
  <Alert message="Informational Notes" type="info" showIcon />
  <Alert message="Warning" type="warning" showIcon />
  <Alert message="Error" type="error" showIcon />
  <Alert
    message="success tips"
    description="Detailed description and advices about successful copywriting."
    type="success"
    showIcon
  />
  <Alert
    message="Informational Notes"
    description="Additional description and informations about copywriting."
    type="info"
    showIcon
  />
  <Alert
    message="Warning"
    description="This is a warning notice about copywriting."
    type="warning"
    showIcon
  />
  <Alert
    message="Error"
    description="This is an error message about copywriting."
    type="error"
    showIcon
  />
</div>, mountNode);

Display Alert as a banner at top of page.

import { Alert } from 'antd';

ReactDOM.render(
  <div>
    <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 />
  </div>
, mountNode);
Success Text
Info Text
Warning Text
Error Text

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

import { Alert } from 'antd';

ReactDOM.render(<div>
  <Alert message="Success Text" type="success" />
  <Alert message="Info Text" type="info" />
  <Alert message="Warning Text" type="warning" />
  <Alert message="Error Text" type="error" />
</div>, 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.

import { Alert } from 'antd';

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

Replace the default icon with customized text.

import { Alert } from 'antd';

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

API#

PropertyDescriptionTypeDefault
typeType of Alert styles, options:success, info, warning, errorstringinfo, in banner mode it's warning
closableWhether Alert can be closedboolean-
closeTextClose text to showstring|ReactNode-
messageContent of Alertstring|ReactNode-
descriptionAdditional content of Alertstring|ReactNode-
onCloseCallback when close AlertFunction-
showIconWhether to show iconbooleanfalse, in banner mode it's true
bannerWhether to show as bannerbooleanfalse