logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
6.0.0-alpha.3
  • Components Overview
  • Changelog
    v6.0.0-alpha.3
  • General
    • Button
    • FloatButton
      5.0.0
    • Icon
    • Typography
  • Layout
    • Divider
    • Flex
      5.10.0
    • Grid
    • Layout
    • Masonry
      6.0.0
    • 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
      DEPRECATED
    • 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
When To Use
Examples
Success
Info
Warning
403
404
500
Error
Custom icon
Custom semantic dom styling
API
Semantic DOM
Design Token

Result

Used to feedback the processing results of a series of operations.
Importimport { Result } from "antd";
GitHub
components/resultIssueOpen issues
Docs
Edit this page
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
X
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
WeaveFox logoWeaveFox-AI Development with WeaveFox 🦊
xtech logoAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community
loading

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

PropertyDescriptionTypeDefaultVersion
classNamesCustomize class for each semantic structure inside the component. Supports object or functionRecord<SemanticDOM, string> | (info: { props }) => Record<SemanticDOM, string>-
extraOperating areaReactNode-
iconCustom back iconReactNode-
statusResult status, decide icons and colorssuccess | error | info | warning | 404 | 403 | 500info
stylesCustomize inline style for each semantic structure inside the component. Supports object or functionRecord<SemanticDOM, CSSProperties> | (info: { props }) => Record<SemanticDOM, CSSProperties>-
subTitleThe subTitleReactNode-
titleThe titleReactNode-

Semantic DOM

Design Token

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

Show successful results.

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

Show processing results.

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

The result of the warning.

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

you are not authorized to access this page.

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

The page you visited does not exist.

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

Something went wrong on server.

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

Complex error feedback.

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

Custom icon.

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

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

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
6.0.0
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!
classNames Object
This is a subtitle
Content area
classNames Function
Dynamic class names
title
subTitle
The Content of Result
  • root
    6.0.0
    Root element with text alignment, layout styles and other basic container styles
  • icon
    6.0.0
    Icon element with margin, text alignment, font size, status colors and other icon styles
  • title
    6.0.0
    Title element with font size, text color, line height, text alignment and other text styles
  • subTitle
    6.0.0
    Subtitle element with font size, text color, line height and other text styles
  • extra
    6.0.0
    Action area element with margin, text alignment, inner element spacing and other layout styles
  • body
    6.0.0
    Content element with margin, padding, background color and other content area styles