Alert component for feedback.
The simplest usage for short messages.
import React from 'react';
import { Alert } from 'antd';
const App: React.FC = () => <Alert message="Success Text" type="success" />;
export default App;
To show close button.
import React from 'react';
import { Alert, Space } from 'antd';
const onClose = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
console.log(e, 'I was closed.');
};
const App: React.FC = () => (
<Space direction="vertical" style={{ width: '100%' }}>
<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}
/>
</Space>
);
export default App;
A relevant icon will make information clearer and more friendly.
import React from 'react';
import { Alert, Space } from 'antd';
const App: React.FC = () => (
<Space direction="vertical" style={{ width: '100%' }}>
<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
/>
</Space>
);
export default App;
Display Alert as a banner at top of page.
import React from 'react';
import { Alert, Space } from 'antd';
const App: React.FC = () => (
<Space direction="vertical" style={{ width: '100%' }}>
<Alert message="Warning text" banner />
<Alert
message="Very long warning text warning text text text text text text text"
banner
closable
/>
<Alert showIcon={false} message="Warning text without icon" banner />
<Alert type="error" message="Error text" banner />
</Space>
);
export default App;
Smoothly unmount Alert upon close.
import React, { useState } from 'react';
import { Alert, Switch, Space } from 'antd';
const App: React.FC = () => {
const [visible, setVisible] = useState(true);
const handleClose = () => {
setVisible(false);
};
return (
<Space direction="vertical" style={{ width: '100%' }}>
{visible && (
<Alert message="Alert Message Text" type="success" closable afterClose={handleClose} />
)}
<p>click the close button to see the effect</p>
<Switch onChange={setVisible} checked={visible} disabled={visible} />
</Space>
);
};
export default App;
Custom action.
import React from 'react';
import { Alert, Button, Space } from 'antd';
const App: React.FC = () => (
<Space direction="vertical" style={{ width: '100%' }}>
<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
/>
</Space>
);
export default App;
There are 4 types of Alert: success, info, warning, error.
import React from 'react';
import { Alert, Space } from 'antd';
const App: React.FC = () => (
<Space direction="vertical" style={{ width: '100%' }}>
<Alert message="Success Text" type="success" />
<Alert message="Info Text" type="info" />
<Alert message="Warning Text" type="warning" />
<Alert message="Error Text" type="error" />
</Space>
);
export default App;
Additional description for alert message.
import React from 'react';
import { Alert, Space } from 'antd';
const App: React.FC = () => (
<Space direction="vertical" style={{ width: '100%' }}>
<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"
/>
</Space>
);
export default App;
Replace the default icon with customized text.
import React from 'react';
import { Alert } from 'antd';
const App: React.FC = () => <Alert message="Info Text" type="info" closeText="Close Now" />;
export default App;
Show a loop banner by using with react-text-loop-next or react-fast-marquee.
import React from 'react';
import { Alert } from 'antd';
import Marquee from 'react-fast-marquee';
const App: React.FC = () => (
<Alert
banner
message={
<Marquee pauseOnHover gradient={false}>
I can be a React component, multiple React components, or just some text.
</Marquee>
}
/>
);
export default App;
ErrorBoundary Component for making error handling easier in React.
import React, { useState } from 'react';
import { Alert, Button } 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>
);
};
const App: React.FC = () => (
<ErrorBoundary>
<ThrowError />
</ErrorBoundary>
);
export default App;
| 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 | <CloseOutlined /> | 4.18.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 | - |
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| description | Custom error description to show | ReactNode | {{ error stack }} | |
| message | Custom error message to show | ReactNode | {{ error }} |
click the close button to see the effect