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
import { Alert } from 'antd';
ReactDOM.render(
<Alert message="Success Text" type="success" />
, mountNode);
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);
Detailed description and advices about successful copywriting.
Additional description and informations about copywriting.
This is a warning notice about copywriting.
This is an error message about copywriting.
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);
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);
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);
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);
import { Alert } from 'antd';
ReactDOM.render(
<Alert message="Info Text" type="info" closeText="Close Now" />
, mountNode);
placeholder text here
import { Alert } from 'antd';
class App extends React.Component {
state = {
visiable: true,
}
handleClose = () => {
this.setState({ visiable: false });
}
render() {
return (
<div>
{
this.state.visiable ? (
<Alert
message="Alert Message Text"
type="success"
closable
afterClose={this.handleClose}
/>
) : null
}
<p>placeholder text here</p>
</div>
);
}
}
ReactDOM.render(
<App />
, mountNode);
API#
Property | Description | Type | Default |
---|---|---|---|
afterClose | Called when close animation is finished | () => void | - |
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 |
iconType | Icon type, effective when showIcon is true | string | - |
type | Type of Alert styles, options: success , info , warning , error | string | info , in banner mode default is warning |
onClose | Callback when Alert is closed | (e: MouseEvent) => void | - |