logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.25.0
  • Components Overview
  • General
    • Button
    • FloatButton
      5.0.0
    • Icon
    • Typography
  • Layout
    • Divider
    • Flex
      5.10.0
    • Grid
    • Layout
    • Space
    • Splitter
      5.21.0
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
    • Tabs
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPicker
      5.5.0
    • DatePicker
    • Form
    • Input
    • InputNumber
    • Mentions
    • Radio
    • Rate
    • Select
    • Slider
    • Switch
    • TimePicker
    • Transfer
    • TreeSelect
    • Upload
  • Data Display
    • Avatar
    • Badge
    • Calendar
    • Card
    • Carousel
    • Collapse
    • Descriptions
    • Empty
    • Image
    • List
    • Popover
    • QRCode
      5.1.0
    • Segmented
    • Statistic
    • Table
    • Tag
    • Timeline
    • Tooltip
    • Tour
      5.0.0
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
      5.1.0
  • Other
    • Affix
    • App
      5.1.0
    • ConfigProvider
    • Util
      5.13.0

Alert

Display warning messages that require attention.
Importimport { Alert } from "antd";
Sourcecomponents/alert
Docs
Edit this pageChangelog

Resources

Ant Design X
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
Ant Motion-Motion Solution
China Mirror 🇨🇳

Community

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconf logoSEE Conf-Experience Tech Conference

Help

GitHub
Change Log
FAQ
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTech logoMore Products

yuque logoYuQue-Document Collaboration Platform
AntV logoAntV-Data Visualization
Egg logoEgg-Enterprise Node.js Framework
Kitchen logoKitchen-Sketch Toolkit
Galacean logoGalacean-Interactive Graphics Solution
xtech logoAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community
loading

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

API

Common props ref:Common props

PropertyDescriptionTypeDefaultVersion
actionThe action of AlertReactNode-4.9.0
afterCloseCalled when close animation is finished() => void-
bannerWhether to show as bannerbooleanfalse
closableThe config of closable, >=5.15.0: support aria-*boolean | ({ closeIcon?: React.ReactNode } & React.AriaAttributes)false
descriptionAdditional content of AlertReactNode-
iconCustom icon, effective when showIcon is trueReactNode-
messageContent of AlertReactNode-
showIconWhether to show iconbooleanfalse, in banner mode default is true
typeType of Alert styles, options: success, info, warning, errorstringinfo, in banner mode default is warning
onCloseCallback when Alert is closed(e: MouseEvent) => void-

Alert.ErrorBoundary

PropertyDescriptionTypeDefaultVersion
descriptionCustom error description to showReactNode{{ error stack }}
messageCustom error message to showReactNode{{ error }}

Design Token

Component TokenHow to use?
Token NameDescriptionTypeDefault Value
defaultPaddingDefault paddingundefined | Padding<string | number>8px 12px
withDescriptionIconSizeIcon size with descriptionnumber24
withDescriptionPaddingPadding with descriptionundefined | Padding<string | number>20px 24px
Global TokenHow to use?
Banner

Display Alert as a banner at top of page.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Basic

The simplest usage for short messages.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Closable

To show close button.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Icon

A relevant icon will make information clearer and more friendly.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Loop Banner

Show a loop banner by using with react-text-loop-next or react-fast-marquee.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
ErrorBoundary

ErrorBoundary Component for making error handling easier in React.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
More types

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Description

Additional description for alert message.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Smoothly Unmount

Smoothly unmount Alert upon close.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Custom action

Custom action.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Success Text
Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text

Error Text
Error Description Error Description Error Description Error Description Error Description Error Description

Error Text
Error Description Error Description Error Description Error Description Error Description Error Description
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.
Success Text

Info Text

Warning Text

Error Text
Success Text
Success Description Success Description Success Description

Info Text
Info Description Info Description Info Description Info Description

Warning Text
Warning Description Warning Description Warning Description Warning Description

Error Text
Error Description Error Description Error Description Error Description
Alert Message Text

click the close button to see the effect

Success Tips

Error Text
Error Description Error Description Error Description Error Description

Warning Text

Info Text
Info Description Info Description Info Description Info Description