UI components · Feedback
Result Page
Also called: Success page, Confirmation page, Error page, Result
A full-page response after an action like paying, submitting, or signing up. A big icon, a one-line result title, a line of explanation, and "next step" buttons tell users whether it worked and what to do next.
Click “Labeled” to see what each part is called, or “Anti-pattern” to see the most common mistake.
How to tell AI
Swap in your own content firstBuild a "payment successful" result page. Center the content with a max width of 480px. At the top, a 64px green round check icon; below it, a 24px bold title "Payment successful"; then one line of 14px gray text: "We'll ship within 24 hours and text you the tracking info." Under that, a light gray info box with two columns listing "Order SO-0918-0032," "Amount paid $45.00," and "Paid with Apple Pay." At the bottom, two buttons side by side: a primary "View order" and a regular "Keep shopping." Also build a failure version: a red cross icon, the title "Payment failed," the text "Your card was declined. We'll hold the order for 30 minutes," and the buttons "Try again" and "Use another payment method." Refreshing the page must never charge twice.
Send to
01Decide
Does your content look like this?
Check both columns to confirm Result Page is what you need.
Use Result Page when
- The last step of an important flow like paying, ordering, applying, or signing up, telling users whether it worked
- Actions that take time to process in the background (under review, importing), explaining the current state and how long it should take
- Error pages like 403 no access, 404 page not found, and 500 server error
Pick something else when
Feedback for small actions like saving, copying, or favoriting
Use insteadToastA list with no data yet. Use an empty state that nudges users to create the first item.
Use insteadEmpty StateOne form field filled in wrong. Show the error under that field instead of jumping to a failure page.
Not sure? Upload a screenshot and page analysis will check which layout each block should use.
02Pitfalls
Common misuse
It looks like it works, but it makes things harder for users.
- 01
Just a big check mark and "Success," with no explanation and no next-step buttons, so users don't know where to go
The wireframe below shows this case. The red dashed box marks the problem.The wireframe on the right shows this case. The red dashed box marks the problem.
- 02
A failure page that only says "Something went wrong," with no reason and no way to retry or contact support
- 03
Refreshing the success page submits again, placing a duplicate order or charging twice
03Spot it
How to spot it
Look at the overall structure first, then check a few features you can spot at a glance.
Structure
A big centered status icon, a result title, a line of explanation, an optional box of key details (order number, amount, failure reason), and one or two next-step buttons.
PartsClick one to highlight it in the wireframe above
04Explained
In detail
A result page appears at the last step of a flow: payment successful, order placed, sign-up complete, application sent, import failed. It looks very consistent. A big status icon sits in the middle of the page (a green check, a red cross, a yellow exclamation mark, or a clock for "processing"), with a large title like "Payment successful" below it, a gray line of explanation ("Order SO-0918 will ship within 24 hours"), and then a primary button and a secondary button ("View order," "Keep shopping"). Sometimes there's also a light gray box listing key details like the order number and amount, or the reasons it failed. Component libraries' Result components are often used for 403, 404, and 500 error pages too.
How it differs from an Empty State: an empty state says "nothing here yet" and nudges users to create the first item. A result page says "the thing you just did is finished, and here's how it went." How it differs from a Toast: a toast flashes in a corner for a few seconds and suits small actions like "Saved." Important results at the end of a flow, like a payment or an application, deserve a full result page so users can confirm the outcome and choose what's next.
Make the title state the result directly, and put the key details and what happens next (when it ships, where to check) in the explanation. Always include next-step buttons so users never hit a dead end. On a failure page, say why it failed and how to fix it ("Try again," "Contact support"), and keep whatever the user already entered. Pages like "Payment successful" must not resubmit when refreshed.
Developer infoTerm ID, DOM cues, match priority
- Term ID
component-result- DOM selectors
The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).
.ant-result.el-result.arco-result.n-result.weui-msg
- Class keywords
Class names, ids and data-testid are split into words and matched in order, so page-header, PageHeader_root__x7a and pageHeader all become page, header.
result-pageresult-viewresult-screensuccess-pagesuccess-viewsuccess-screensuccess-statepayment-successorder-successsubmit-success
- Component names
React / Vue component names read in development mode. Case-insensitive; library prefixes such as El, Ant and Mui are dropped.
ResultPageResultViewResultScreenSuccessPagePaymentSuccessOrderSuccess
- Structure
Computed from how the element is laid out and styled. It only adds to the score and never decides on its own.
starts with media
- Priority
- 2 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 30, 2026