logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.25.4
  • Ant Design
    • Introduction
    • Design Values
    • Cases
  • Global Styles
    • Colors
    • Layout
    • Font
    • Icons
    • Dark Mode
    • Shadow
  • Design Patterns
    • Overview
    • Global Rules
      • Feedback
      • Navigation
      • Data Entry
      • Data Display
      • Copywriting
      • Data format
      • Button
      • Data List
    • Principles
      • Proximity
      • Alignment
      • Contrast
      • Repetition
      • Make it Direct
      • Stay on the Page
      • Keep it Lightweight
      • Provide an Invitation
      • Use Transition
      • React Immediately
    • Template Document
      • Visualization Page
      • Detail Page
  • Design Patterns (Research)
    • Overview
    • Template Document
      • Form Page
      • Workbench
      • List Page
      • Result Page
      • Exception Page
    • Global Rules
      • Navigation
      • Message and Feedback
      • Empty Status
  • Visualization
  • Motion
  • Illustrations
Design Goals
Feedback Methods
When to Use
Success
Failure
Background Operations

Message and Feedback

contributors
    • NavigationEmpty Status

    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

    Used to provide feedback to the user on the results of their actions or to convey messages when necessary.

    Design Goals

    Ensure that users receive feedback or messages that match the context and urgency of their actions under different scenarios, achieving reasonable and effective communication.

    Feedback Methods

    When designing, consider the task the user is attempting to complete and the method of attention required. The feedback methods are listed below:

    When to Use

    Success

    Stay in Place

    Preview

    Modal Dialog

    Notify users of important success results without interrupting their workflow.

    Preview

    Global Message

    Display a brief success message without interrupting the user’s ongoing task.

    Redirect

    Preview

    Inline Text & Illustration

    • Notify users of success at the end of a long-form process;
    • Provide detailed supplementary information (e.g., configuration details).

    Preview

    Global Message

    Display a brief success message without interrupting the user’s ongoing task.

    Failure

    Stay in Place

    Preview

    Modal Dialog

    Alert users to important actions outside the current workflow (e.g., safety warnings).

    Preview

    Alert

    Inform users of critical errors that require immediate attention.

    Preview

    Form Validation

    • User input does not meet field or form requirements;
    • User skipped required fields;
    • System detects errors in form data.

    Preview

    Notification

    • Inform users of important issues or failure statuses that require immediate decisions;
    • Feedback on backend process failures & alerts.

    Redirect

    Preview

    Inline Text & Illustration

    • Notify users of failure at the end of a long-form process due to third-party causes (e.g., application engine creation failure);
    • Provide detailed failure information.

    Background Operations

    Preview

    Notification

    • Inform users of important issues or failure statuses that require immediate decisions;
    • Feedback on backend process results.

    Preview

    Notification Center

    Notify users of related activity information (e.g., items that need user approval or the progress of user-submitted approvals).