Result panel
Usage
Use a result panel to show the outcome of a finished process when the outcome is the main content: after closing a work order, after a vehicle import, when a page can't be shown because of permissions. Confirmation, error and create-resource pages are built from it.
- For an outcome next to other content (a form that stays on screen), use an inline alert; for background confirmations, a toast.
- Title states the outcome in plain words ("Work order WO-1042 closed", "We couldn't import the vehicle list"). Description says what happened and what to do next. Give a reference ID for anything support may need.
- One primary next action plus at most one secondary link.
Anatomy
- Status icon —
.result__icon, decorative, shape per tone - Title —
.result__title;h1on a full page,h2in a region - Description —
.result__description, with a copyablecode.result__reference - Actions —
.result__actions: primary button + secondary link - Details (optional) —
details.result__detailswith error ID, time, logs
Examples
Result panel
Work order WO-1042 closed
Brake inspection on KX-24 is logged and the invoice was sent to Northside Depot. Reference INV-2026-0918.
We couldn't import the vehicle list
The file has no VIN column. Add a column named “VIN” and upload it again. Nothing was changed.
38 of 42 vehicles imported
4 rows were skipped because their VINs already exist. Review them before dispatching.
Report is being generated
The September cost report covers 42 vehicles. We'll email it to you in about 5 minutes.
We couldn't save work order WO-1042
Something went wrong on our side. Your changes are kept on this device — try again in a minute. If it keeps happening, contact support with reference ERR-7F3A-21.
Technical details
- Error ID
- ERR-7F3A-21
- Time
- Request
- PATCH /work-orders/WO-1042 → 503
<section class="result result--success" aria-labelledby="r-title">
<span class="result__icon" aria-hidden="true"><svg focusable="false"><use href="#icon-circle-check"></use></svg></span>
<h2 class="result__title" id="r-title" tabindex="-1">Work order WO-1042 closed</h2>
<p class="result__description">… Reference <code class="result__reference">INV-2026-0918</code>.</p>
<div class="result__actions">
<button type="button" class="btn btn--primary">Open next work order</button>
<a class="btn btn--ghost" href="/dispatch">Back to dispatch board</a>
</div>
<details class="result__details"><summary>Technical details</summary><dl>…</dl></details>
</section>
<!-- Inserted after an async action: move focus to the title (tabindex="-1") -->
<!-- Tones: result--success | --error | --warning | --info | --no-permission. Full page: .result--page + h1 -->API
| Hook | Values | Purpose |
|---|---|---|
.result | block | Centered outcome panel, one measure wide |
.result--success | --error | --warning | --info | --no-permission | modifier | Icon tone |
.result--page | modifier | Full-page spacing; title is the h1 and matches <title> |
.result__icon | __title | __description | __reference | __actions | __details | parts | See anatomy |
tabindex="-1" on the title | attribute | Lets script move focus to the outcome after an async action |
Do and don't
"We couldn't import the vehicle list. The file has no VIN column. Add a column named “VIN” and upload it again."
"Oops! Something went wrong."
Accessibility
- A full-page result uses the title as the page's
h1and the document<title>starts with the same words. - In a region after an async action: insert the panel and move focus to its title (
tabindex="-1"), or announce it withrole="status"— not both, or it's read twice. - The icon is decorative; the tone is in the title's words. Color is never the only signal.
- Reference codes use
user-select: allso one click selects them for copying. <details>is keyboard operable with Enter/Space and announces its expanded state natively.
Tokens
| Custom property | Purpose |
|---|---|
--color-feedback-{success|danger|warning|info}-bg | -icon | Icon disc and glyph |
--color-bg-muted, --color-text-muted | No-permission tone, description text |
--typography-h3-*, --typography-code-* | Title, reference |
--size-measure | Max width |
--space-8 | -16 | Icon size, block padding |