logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
YouMindTRACTIANLobeHubCodeRabbit
6.4.5
  • Components Overview
  • Changelog
    v6.4.5
  • General
    • Button
    • FloatButton
    • Icon
    • Typography
  • Layout
    • Divider
    • Flex
    • Grid
    • Layout
    • Masonry
      6.0.0
    • Space
    • Splitter
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
    • Tabs
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPicker
    • 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
      DEPRECATED
    • Popover
    • QRCode
    • Segmented
    • Statistic
    • Table
    • Tag
    • Timeline
    • Tooltip
    • Tour
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
  • Other
    • Affix
    • App
    • BorderBeam
      6.4.0
    • ConfigProvider
    • Util
When To Use
Examples
Basic
More types
Filled
Closable
Description
Icon
Banner
Loop Banner
Smoothly Unmount
ErrorBoundary
Custom action
Custom semantic dom styling
API
ClosableType
Alert.ErrorBoundary
Semantic DOM
Design Token

Alert

Display warning messages that require attention.
Importimport { Alert } from 'antd';
GitHub
components/alertIssueOpen issues
Docs
Edit this pageLLMs.md
TreeDrawer

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
X
yuque logoAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconf logoSEE Conf-Experience Tech Conference

Help

GitHub
Change Log
FAQ
For Agents
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
WeaveFox logoWeaveFox-AI Development with WeaveFox 🦊
xtech logoAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community
Development
Design
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

PropertyDescriptionTypeDefaultVersionGlobal Config
actionThe action of AlertReactNode-×
afterCloseCalled when close animation is finished, please use closable.afterClose instead() => void-×
bannerWhether to show as bannerbooleanfalse×
variantVariant of Alert styleoutlined | filledoutlined6.4.06.4.0
classNamesCustomize class for each semantic structure inside the component. Supports object or functionRecord<SemanticDOM, string> | (info: { props }) => Record<SemanticDOM, string>-6.0.0
closableThe config of closableboolean | ClosableType & React.AriaAttributesfalse5.15.0
closeIcon(Only supports global configuration) Custom close iconReactNode-×5.14.0
descriptionAdditional content of AlertReactNode-×
errorIcon(Only supports global configuration) Custom error icon in Alert iconReactNode-×6.2.0
iconCustom icon, effective when showIcon is trueReactNode-×
infoIcon(Only supports global configuration) Custom info icon in Alert iconReactNode-×6.2.0
messageContent of Alert, please use title insteadReactNode-×
onCloseCallback when Alert is closed, please use closable.onClose instead(e: MouseEvent) => void-×
closeIconCustom close icon, please use closable.closeIcon insteadReactNode--×
closeTextClose text to show, please use closable.closeIcon insteadReactNode--×
showIconWhether to show iconbooleanfalse, in banner mode default is true×
stylesCustomize inline style for each semantic structure inside the component. Supports object or functionRecord<SemanticDOM, CSSProperties> | (info: { props }) => Record<SemanticDOM, CSSProperties>-6.0.0
successIcon(Only supports global configuration) Custom success icon in Alert iconReactNode-×6.2.0
titleContent of AlertReactNode-×
typeType of Alert styles, options: success, info, warning, errorstringinfo, in banner mode default is warning×
warningIcon(Only supports global configuration) Custom warning icon in Alert iconReactNode-×6.2.0

ClosableType

PropertyDescriptionTypeDefaultVersion
afterCloseCalled when close animation is finishedfunction--
closeIconCustom close iconReactNode--
onCloseCallback when Alert is closed(e: MouseEvent) => void--

Alert.ErrorBoundary

PropertyDescriptionTypeDefaultVersion
descriptionCustom error description to showReactNode{{ error stack }}
messageCustom error message to show, please use title insteadReactNode{{ error }}
titleCustom error title to showReactNode{{ error }}

Semantic DOM

Design Token

Component TokenHow to use?
Token NameDescriptionTypeDefault Value
defaultPaddingDefault paddingPadding<string | number> | undefined8px 12px
withDescriptionIconSizeIcon size with descriptionstring | number24
withDescriptionPaddingPadding with descriptionPadding<string | number> | undefined20px 24px
Global TokenHow to use?
Token NameDescriptionTypeDefault Value
colorErrorUsed to represent the visual elements of the operation failure, such as the error Button, error Result component, etc.string#ff4d4f
colorErrorBgThe background color of the error state.string#fff2f0
colorErrorBorderThe border color of the error state.string#ffccc7
colorIconWeak action. Such as `allowClear` or Alert close buttonstringrgba(0,0,0,0.45)
colorIconHoverWeak action hover color. Such as `allowClear` or Alert close buttonstringrgba(0,0,0,0.88)
colorInfoUsed to represent the operation information of the Token sequence, such as Alert, Tag, Progress, and other components use these map tokens.string#1677ff
colorInfoBgLight background color of information color.string#e6f4ff
colorInfoBorderBorder color of information color.string#91caff
colorPrimaryBorderThe stroke color under the main color gradient, used on the stroke of components such as Slider.string#91caff
colorSuccessUsed to represent the token sequence of operation success, such as Result, Progress and other components will use these map tokens.string#52c41a
colorSuccessBgLight background color of success color, used for Tag and Alert success state background colorstring#f6ffed
colorSuccessBorderBorder color of success color, used for Tag and Alert success state border colorstring#b7eb8f
colorTextDefault text color which comply with W3C standards, and this color is also the darkest neutral color.stringrgba(0,0,0,0.88)
colorTextHeadingControl the font color of heading.stringrgba(0,0,0,0.88)
colorWarningUsed to represent the warning map token, such as Notification, Alert, etc. Alert or Control component(like Input) will use these map tokens.string#faad14
colorWarningBgThe background color of the warning state.string#fffbe6
colorWarningBorderThe border color of the warning state.string#ffe58f
borderRadiusLGLG size border radius, used in some large border radius components, such as Card, Modal and other components.number8
fontFamilyThe font family of Ant Design prioritizes the default interface font of the system, and provides a set of alternative font libraries that are suitable for screen display to maintain the readability and readability of the font under different platforms and browsers, reflecting the friendly, stable and professional characteristics.string-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'
fontSizeThe most widely used font size in the design system, from which the text gradient will be derived.number14
fontSizeIconControl the font size of operation icon in Select, Cascader, etc. Normally same as fontSizeSM.number12
fontSizeLGLarge font sizenumber16
lineHeightLine height of text.number1.5714285714285714
lineTypeBorder style of base componentsstringsolid
lineWidthBorder width of base componentsnumber1
lineWidthFocusControl the width of the line when the component is in focus state.number3
marginSMControl the margin of an element, with a medium-small size.number12
marginXSControl the margin of an element, with a small size.number8
motionDurationMidMotion speed, medium speed. Used for medium element animation interaction.string0.2s
motionDurationSlowMotion speed, slow speed. Used for large element animation interaction.string0.3s
motionEaseInOutCircPreset motion curve.string
Cubic Bezier Visualizer
cubic-bezier(0.78, 0.14, 0.15, 0.86)External Link Icon
Banner

Display Alert as a banner at top of page.

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
Basic

The simplest usage for short messages.

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
Filled

Hide the border with variant="filled".

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
Description

Additional description for alert message.

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
Smoothly Unmount

Smoothly unmount Alert upon close.

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
Custom action

Custom action.

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
More types

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

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
Closable

To show close button.

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
Icon

A relevant icon will make information clearer and more friendly.

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
Loop Banner

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

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
ErrorBoundary

ErrorBoundary Component for making error handling easier in React.

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
Custom semantic dom styling

You can customize the semantic dom style of Alert by passing objects/functions through classNames and styles.

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
6.0.0
Success Text
Info 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
Success Text

Info Text

Warning Text

Error Text
Warning Title

Success Title

Info Title

Error Title
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.
Object styles
Function styles
Info Text
Info Description Info Description Info Description Info Description
  • root
    6.0.0
    Root element with border, background, padding, border-radius, and positioning styles for the alert container
  • icon
    6.0.0
    Icon element with color, line-height, and margin styles, supporting different status icon types
  • section
    6.0.0
    Content element with flex layout controlling content area typography and minimum width
  • title
    6.0.0
    Title element with text color and font styling for the alert title
  • description
    6.0.0
    Description element with font-size and line-height styles for additional content
  • actions
    6.0.0
    Actions element with layout and spacing styles for action buttons
  • close
    6.1.0
    Close button element with basic button styling