Ant DesignAlert
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
The simplest usage for short messages.
TypeScript
JavaScript
import { Alert } from 'antd';
ReactDOM.render(<Alert message="Success Text" type="success" />, mountNode);To show close button.
TypeScript
JavaScript
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 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.
A relevant icon will make information clearer and more friendly.
TypeScript
JavaScript
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.
TypeScript
JavaScript
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,
);placeholder text here
Smoothly unmount Alert upon close.
TypeScript
JavaScript
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 Tips
Error Text
Error Description Error Description Error Description Error Description
Custom action.
TypeScript
JavaScript
import React from 'react';
import { Alert, Button, Space } from 'antd';
ReactDOM.render(
<>
<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
/>
</>,
mountNode,
);There are 4 types of Alert: success, info, warning, error.
TypeScript
JavaScript
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,
);Additional description for alert message.
TypeScript
JavaScript
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,
);Replace the default icon with customized text.
TypeScript
JavaScript
import { Alert } from 'antd';
ReactDOM.render(<Alert message="Info Text" type="info" closeText="Close Now" />, mountNode);Show a loop banner by using with react-text-loop-next or react-fast-marquee.
TypeScript
JavaScript
import { Alert } from 'antd';
import { TextLoop } from 'react-text-loop-next';
import Marquee from 'react-fast-marquee';
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>
}
/>
<Alert
banner
message={
<Marquee pauseOnHover gradient={false}>
I can be a React component, multiple React components, or just some text.
</Marquee>
}
/>
</>,
mountNode,
);ErrorBoundary Component for making error handling easier in React.
TypeScript
JavaScript
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 danger onClick={onClick}>
Click me to throw a error
</Button>
);
};
ReactDOM.render(
<ErrorBoundary>
<ThrowError />
</ErrorBoundary>,
mountNode,
);API#
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| action | The action of Alert | ReactNode | - | 4.9.0 |
| 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 | ReactNode | - | |
| closeIcon | Custom close icon | ReactNode | 4.17.0 | |
| description | Additional content of Alert | ReactNode | - | |
| icon | Custom icon, effective when showIcon is true | ReactNode | - | |
| message | Content of Alert | 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 | (e: MouseEvent) => void | - |
Alert.ErrorBoundary#
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| description | Custom error description to show | ReactNode | {{ error stack }} | |
| message | Custom error message to show | ReactNode | {{ error }} |