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

Basic

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

Closable

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.

Icon

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);

Banner

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

More types

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

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

Customized Close Text

Replace the default icon with customized text.

import { Alert } from 'antd';

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

API#

Property	Description	Type	Default
banner	Whether to show as banner	boolean	false
closable	Whether Alert can be closed	boolean	-
closeText	Close text to show	string\|ReactNode	-
description	Additional content of Alert	string\|ReactNode	-
message	Content of Alert	string\|ReactNode	-
showIcon	Whether to show icon	boolean	false, in `banner` mode default is true
type	Type of Alert styles, options: `success`, `info`, `warning`, `error`	string	`info`, in `banner` mode default is `warning`
onClose	Callback when Alert is closed	Function	-

Components

Alert

When To Use#

Examples

API#