Result

The whole page after an operation ends: a status drawing, a title, an explanation and what to do next.

Preview in Figma LLMs

Overview

Design

Usage

When to reach for Result, how to pick a status, and what to write in it.

When to use

Use Result when the outcome of an operation is the whole page: after a purchase, a failed payment, or an address that leads nowhere. If the page still has its own work on it, use something else.

Alert when the message sits inside a page that still has content, like a form that failed validation.
Empty when a container has nothing in it yet. An empty table wants “Add the first one”, not “Go back”.
Modal when the reader has to answer. Result reports and does not ask.
message or notification when the outcome is small enough to miss, like a saved draft.

Choosing a status

status picks the icon. success, error, info and warning draw an icon from your icon pack in the status color. 403, 404 and 500 draw a built-in illustration. The default is info.

Pick by what happened: 404 for an address that leads nowhere, 403 for a signed-in reader who is not allowed, 500 for a failure on your side. An expired session is not a 403. Send the reader to sign in, so they keep what they were doing.

Title and subtitle

title is the headline and subTitle the quieter line under it. A reader who reads only the title should still know where they stand.

The title says what happened, in one line and in the reader's terms: “Payment received”, “We could not save your changes”. Not “Error”, and not a status code.
The subtitle adds what the title left out: which order, what happens next, when. Keep it to two sentences, and move a list to children.
Leave either one out and it takes no space.

One next action

extra is the action row, and it decides whether the page is a dead end. Give the reader one obvious way out of the state they are in.

One primary button, and at most one secondary.
The primary moves them forward: retry, back to the order, open the draft that was kept. “Go home” is the last resort.
“Contact support” should be a real link that carries the reference with it.
Give each action a key. extra takes one node or an array, and an array needs a key on each child.
If there is nothing to do, leave extra out. A button that only reloads the page is worse than none.

A custom icon

Pass icon a node to replace the status icon, like a mailbox for “Check your email” or a clock for “Still processing”. Do not replace it to decorate a plain success. Pass null to hide it when the surrounding card already says what happened.

Size your own icon. A pack icon passed to icon renders at the text size. Add text-(length:--ant-result-icon-font-size) so it matches the status icons.
icon has no effect on 403, 404 and 500. The illustration always renders. Use another status if you want your own icon or none.
Your icon takes the status color unless you give it one.

The body

children renders below the actions, in a tinted panel. Most Results need no body, and a nearly empty panel looks like a mistake.

Put the specifics here: which items failed, what was saved and what was not, a request ID the reader can select and copy.
Keep it short enough to scan. A body longer than the screen is a report, not a result.

Errors worth reading

Most Results a reader meets are failures, and what makes one useful is the words.

Name what happened in terms the reader can check. They pressed “Publish”. They did not call an endpoint.
Say what the state is now: “Your changes are still in the draft.”
Keep the error code in children, where it can be copied, and out of the title.
Do not blame the reader for what the system did, and offer the retry instead of an apology.
“Try again later” needs a later. If you know it is minutes, say minutes.

On This Page