Components / Feedback & Status / Result
Result stable
The outcome page as a part: the mark, the verdict and the next action, centered. Success, failure, and the space between.
Payment complete
¥128,400 was charged to the card on file. The receipt is on its way to the billing address — reference INV-2041.
Uses: Button — include its CSS alongside this one.
<div class="k-result"> <span class="k-result-ic ok"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><circle cx="12" cy="12" r="8.5"/><path d="m8.5 12.2 2.4 2.4 4.8-5"/></svg></span> <h3>Payment complete</h3> <p>¥128,400 was charged to the card on file. The receipt is on its way to the billing address — reference INV-2041.</p> <div class="acts"><button class="btn btn-pri btn-md" type="button">View the invoice</button><button class="btn btn-ghost btn-md" type="button">Back to billing</button></div> </div>
/* KATA Result — a verdict, centered. */
.k-result{font-family:var(--k-font);color:var(--k-ink);text-align:center;max-width:420px;margin:0 auto;padding:26px 20px}
.k-result-ic{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 15px}
.k-result-ic.ok{background:var(--k-success-bg);color:var(--k-success-ink)}
.k-result-ic.err{background:var(--k-danger-bg);color:var(--k-danger-ink)}
.k-result h3{font-size:17px;font-weight:600;letter-spacing:-.015em}
.k-result p{margin-top:8px;font-size:13.5px;line-height:1.8;color:var(--k-ink-2)}
.k-result .acts{margin-top:18px;display:flex;gap:9px;justify-content:center;flex-wrap:wrap}
Installation
CLI
node kata-ui.mjs add result
Writes the part’s CSS into your project. Dependencies are resolved and written with it. New to the CLI? See the CLI doc.
Manual
- Load
tokens.cssonce, before any part. - Copy the CSS tab into your stylesheet.
- Copy the HTML where it belongs.
Examples
Failure
The card was declined
Nothing was charged. The bank gave no reason beyond "do not honor" — a different card, or a call to the bank, is the way through.
<link rel="stylesheet" href="/components/button/button.css"> <div class="k-result"> <span class="k-result-ic err"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><circle cx="12" cy="12" r="8.5"/><path d="m9.5 9.5 5 5m0-5-5 5"/></svg></span> <h3>The card was declined</h3> <p>Nothing was charged. The bank gave no reason beyond "do not honor" — a different card, or a call to the bank, is the way through.</p> <div class="acts"><button class="btn btn-pri btn-md" type="button">Try another card</button><button class="btn btn-ghost btn-md" type="button">Contact support</button></div> </div>
Usage
For the end of a flow — paid, sent, deleted, failed. One verdict per page, said in the title; the words under it carry the detail (the reference number, the reason), and the buttons carry the way out. Empty State is for "nothing here yet"; Result is for "this just happened".
Accessibility
The mark is decoration — the verdict lives in the heading text, never in the icon alone. After a submitted flow, move focus to the heading so the outcome is the first thing announced.
Anatomy
The public surface of this part, read from its own source. Class names are the API — the CSS tab above is the full contract.
.k-result | class |
.k-result-ic | class |
.ok | class |
.err | class |
.acts | class |
aria-hidden | ARIA |
Related parts
Alert beta
A message that stays on the page: info, success, warning, danger. Flat, token-tinted, one icon.
Badge stable
Small status pills — dots, colors and a solid variant.
Empty state beta
What a screen says when there is nothing in it yet: one icon, one line, one way forward.
Meter beta
A measured level with a tick scale — storage, capacity, load. The scale is part of the component.