Success State
成功状态
A task is completely finished — it deserves a page of its own, not just a spinner that stops.
Live Demo
Actually clickablePublished
Your post is live and everyone can see it.
A day on the coast
Just now · 128 views
What you just saw:A big "Published" heading, a preview of what was just posted, and two buttons: "View" and "Back to home".
What it actually is
When a flow completes (an order submitted, a signup finished, a post published), give it a proper success page: confirmation, a look at the result, and the next step. The difference from a toast is that a success page is where you stay, while a toast is something you pass by.
Anatomy · What it's made of
Check Icon成功图标
A checkmark or a light illustration
Title标题
Such as "Published"
Result成果预览
Shows the thing that was just created
Next Action下一步
View / Go back / Do it again
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| The final step of a multi-step flow has completed | Yes |
| The action produced something visible | Yes |
| The user probably wants to look at the result next | Yes |
| A small action is done (saving a setting) | Depends |
Firing up a full success page for a small action like "Saved" is overkill — use a toast.
A success page should immediately tell the user where the result is, not just that it worked.
Similar Patterns
Don't mix these upSuccess StateCurrent
成功状态
A task is completely finished — it deserves a page of its own, not just a spinner that stops.
Empty State
空状态
The block you show when a list is completely empty — it should explain why it is empty and what to do next.
In one line:A task is completely finished — it deserves a page of its own, not just a spinner that stops.
Empty State
空状态
The block you show when a list is completely empty — it should explain why it is empty and what to do next.
Toast
轻提示
A small confirmation that drifts into the corner of the screen after an action and disappears on its own a few seconds later.
Progress Bar
进度条
A horizontal bar that fills up little by little as the task completes, so you know roughly how long is left.
How to tell AI
Three levels of promptAdd the component name and specifics
After publishing succeeds, show a success page: a green checkmark, the heading "Published", a thumbnail preview of what was just published, and two buttons, "View" and "Back to home".
Don't just say this to AI
Bad → BetterDon't say this to AI
Show a success page when it is done.
Say this instead
Show a success page when the flow completes: a green checkmark with a stroke animation, the heading "Published", a thumbnail preview of what was just created, "View" (primary) and "Back to home" (secondary), and intercept browser back to prevent a duplicate submit.
Share this card
Social-readyTurn this pattern into a 3:4 or 1:1 knowledge card and export it as PNG right in the browser. No backend needed.