Loading component…
Loading component…
What automated tests prove about each implementation — separate from whether the package itself is a finished product. Derived from the test files; how the levels are earned.
React
Package maturity: stable · Implementation verification: Beta
This platform’s whole catalogue is verified to React beta. The catalogue figure is the weakest component on that platform, not an average.
npx @kinetixui/cli add result-statenpm i @kinetixui/ui @kinetixui/tokens@kinetixui/ui on npm@kinetixui/tokens on npmThe CLI copies React source. Usage imports from @kinetixui/ui require the npm package; for copied source, use your configured local import instead.
Not implemented yet · data display wave.
Composition · KinetixUI ships no SwiftUI component for this.
Composition · KinetixUI ships no Jetpack Compose component for this.
Composition · KinetixUI ships no Flutter component for this.
The outcome of something the reader just did — success, error, warning, pending, info or partial — with a title, a reference, details and the next action.
Reduced motion: off · your browser setting
We've emailed a receipt to sam@example.com. Your card statement will show KINETIX*STUDIO.
One component for every confirmation and failure screen: a payment received, a booking confirmed, an application
submitted, a refund issued, a transfer where some items did not move. Those are a ResultState with different words,
not separate components.
Reduced motion: off · your browser setting
Two nights from 14 March. We've sent the details to your email.
Your bank declined the charge. Nothing was taken from your account.
We received it, but the proof of address is missing. Add it within 7 days.
Transfers usually arrive within one business day. You can leave this page.
A specialist will review it and reply by Thursday.
One refund needs your bank details before we can send it.
npx @kinetixui/cli add result-stateimport { Button, ReferenceCode, ResultState } from "@kinetixui/ui";
<ResultState
status="success"
title="Booking confirmed"
description="We've emailed your confirmation."
reference={<ReferenceCode label="Booking reference" value="K7Q2XP" size="lg" />}
primaryAction={<Button>View booking</Button>}
secondaryAction={<Button variant="Outline">Back to search</Button>}
/>status is one of success, error, warning, pending, info, partial.title is required and states the outcome in words ("Payment received", not "Success").children are the details — usually a PriceBreakdown or a DescriptionList.icon swaps the glyph; media swaps the whole mark for an illustration.align="start" for a result inside a panel; headingLevel to fit the page outline.<section> named by its title and described by its description.statusLabel (English defaults; pass your own to localise). media keeps that name.pending sets aria-busy on the section.announce turns the title and description into a polite live region, for a result that changes in place
(pending, then success after a poll). A result reached by navigation is announced by moving focus to it, which is
the router's job.The props of @kinetixui/ui, generated from its TypeScript. Props inherited from the underlying DOM element (className, id, event handlers) are accepted too and are not listed.
This table is React-specific. The SwiftUI, Jetpack Compose, Flutter and Angular implementations share the design contract — the same variants, sizes, states and tokens — but each exposes its own idiomatic interface. Their real usage is in the platform tabs on the example above, not here.
| Prop | Type | Notes |
|---|---|---|
| statusrequired | ResultStateStatus | |
| titlerequired | React.ReactNodeStates the outcome in words — "Payment received", "We couldn't confirm your booking". Required. | States the outcome in words — "Payment received", "We couldn't confirm your booking". Required. |
| description | React.ReactNode | |
| statusLabel | stringThe accessible name of the status mark. Defaults to an English word per status; pass your own to localise. | The accessible name of the status mark. Defaults to an English word per status; pass your own to localise. |
| icon | React.ReactNodeReplaces the status glyph inside the mark. The mark keeps its shape, colour and `statusLabel`. | Replaces the status glyph inside the mark. The mark keeps its shape, colour and `statusLabel`. |
| media | React.ReactNodeReplaces the whole mark — an illustration, a product image. Decorative: the status is still announced through `statusLabel`. | Replaces the whole mark — an illustration, a product image. Decorative: the status is still announced through `statusLabel`. |
| reference | React.ReactNodeUsually a `<ReferenceCode>`: the booking reference, order number or transaction ID the reader will need again. | Usually a `<ReferenceCode>`: the booking reference, order number or transaction ID the reader will need again. |
| primaryAction | React.ReactNodeThe one thing to do next. Rendered first in reading order. | The one thing to do next. Rendered first in reading order. |
| secondaryAction | React.ReactNode | |
| align | "center" | "start"`start` for a result inside a wider layout (a panel, a side sheet); `center` (default) for a full screen. | `start` for a result inside a wider layout (a panel, a side sheet); `center` (default) for a full screen. |
| headingLevel | HeadingLevelHeading level of the title. Default 2 — a result inside a page whose own h1 is the app's. | Heading level of the title. Default 2 — a result inside a page whose own h1 is the app's. |
| announce | booleanMake the title and description a polite live region, for a result that changes in place. | Make the title and description a polite live region, for a result that changes in place. |