logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.26.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
When To Use
Examples
Success
Info
Warning
403
404
500
Error
Custom icon
API
Design Token

Result

Used to feedback the processing results of a series of operations.
Importimport { Result } from "antd";
Sourcecomponents/result
Docs
Edit this pageChangelog
contributors
  • ProgressSkeleton

    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

    When To Use

    Use when important operations need to inform the user to process the results and the feedback is more complicated.

    Examples

    API

    Common props ref:Common props

    PropertyDescriptionTypeDefault
    extraOperating areaReactNode-
    iconCustom back iconReactNode-
    statusResult status, decide icons and colorssuccess | error | info | warning | 404 | 403 | 500info
    subTitleThe subTitleReactNode-
    titleThe titleReactNode-

    Design Token

    Component TokenHow to use?
    Token NameDescriptionTypeDefault Value
    extraMarginMargin of extra areaundefined | Margin<string | number>24px 0 0 0
    iconFontSizeIcon sizenumber72
    subtitleFontSizeSubtitle font sizenumber14
    titleFontSizeTitle font sizenumber24
    Global TokenHow to use?
    Success

    Show successful results.

    CodeSandbox Icon
    codeblock
    codepen icon
    External Link Icon
    expand codeexpand code
    Info

    Show processing results.

    CodeSandbox Icon
    codeblock
    codepen icon
    External Link Icon
    expand codeexpand code
    Warning

    The result of the warning.

    CodeSandbox Icon
    codeblock
    codepen icon
    External Link Icon
    expand codeexpand code
    403

    you are not authorized to access this page.

    CodeSandbox Icon
    codeblock
    codepen icon
    External Link Icon
    expand codeexpand code
    404

    The page you visited does not exist.

    CodeSandbox Icon
    codeblock
    codepen icon
    External Link Icon
    expand codeexpand code
    500

    Something went wrong on server.

    CodeSandbox Icon
    codeblock
    codepen icon
    External Link Icon
    expand codeexpand code
    Error

    Complex error feedback.

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

    Custom icon.

    CodeSandbox Icon
    codeblock
    codepen icon
    External Link Icon
    expand codeexpand code
    Successfully Purchased Cloud Server ECS!
    Order number: 2017182818828182881 Cloud server configuration takes 1-5 minutes, please wait.
    Your operation has been executed
    There are some problems with your operation.
    Unauthorized
    403
    Sorry, you are not authorized to access this page.
    No Found
    404
    Sorry, the page you visited does not exist.
    Server Error
    500
    Sorry, something went wrong.
    Submission Failed
    Please check and modify the following information before resubmitting.
    The content you submitted has the following error:
    Your account has been frozen. Thaw immediately >
    Your account is not yet eligible to apply. Apply Unlock >
    Great, we have done all the operations!