logoNamu Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
1.0.0
  • Components Overview
  • General
    • Button
    • FloatButtonNew
    • Icon
    • Typography
  • Layout
    • Divider
    • Grid
    • Layout
    • Space
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPickerNew
    • 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
    • QRCodeNew
    • Segmented
    • Statistic
    • Table
    • Tabs
    • Tag
    • Timeline
    • Tooltip
    • TourNew
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
  • Other
    • Affix
    • AppNew
    • ConfigProvider
When To Use
Examples
Basic
More types
Closable
Description
Icon
Banner
Loop Banner
Smoothly Unmount
ErrorBoundary
Custom action
API
Alert.ErrorBoundary

Alert

  • TreeDrawer

    Resources

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

    Community

    Awesome Namu Design
    Medium
    Twitter
    yuqueNamu Design in YuQue
    Namu Design in Zhihu
    Experience Cloud Blog
    seeconfSEE Conf-Experience Tech Conference

    Help

    GitHub
    Change Log
    FAQ
    Bug Report
    Issues
    Discussions
    StackOverflow
    SegmentFault

    Ant XTechMore Products

    yuqueYuQue-Document Collaboration Platform
    AntVAntV-Data Visualization
    EggEgg-Enterprise Node.js Framework
    kitchenKitchen-Sketch Toolkit
    xtechAnt Financial Experience Tech
    Theme Editor
    Made with ❤ by
    Ant Group and Namu Design Community

    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

    Basic

    The simplest usage for short messages.

    expand codeexpand code
    Closable

    To show close button.

    expand codeexpand code
    Icon

    A relevant icon will make information clearer and more friendly.

    expand codeexpand code
    Loop Banner

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

    expand codeexpand code
    ErrorBoundary

    ErrorBoundary Component for making error handling easier in React.

    expand codeexpand code
    More types

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

    expand codeexpand code
    Description

    Additional description for alert message.

    expand codeexpand code
    Banner

    Display Alert as a banner at top of page.

    expand codeexpand code
    Smoothly Unmount

    Smoothly unmount Alert upon close.

    expand codeexpand code
    Custom action

    Custom action.

    expand codeexpand code

    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
    closeIconCustom close icon, >=5.7.0: close button will be hidden when setting to null or falseboolean | ReactNode<CloseOutlined />
    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 }}
    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
    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