All components (204)

Result

Surfaces · Result · .amset-result

What it is and when to use it

The screen after: payment made, payment declined, account created, page not found. It is the end of something that has just happened, it takes up the main slot and always offers a way forward.

When to use it

On finishing something: paying, submitting a form, deleting, signing up.
tone says how it went: success (default), error, warning or info; each brings its icon, and icon sets your own.
title and description tell what happened.
action for the main exit ("View the order", "Retry the payment") and secondary for the other.
size: sm inside a panel or a dialog, lg when it is the whole screen.
detail for what gets copied into an email to support: the order number, the reference of a failure.

When not to

A band inside a screen that keeps working: Alert.
A list that has nothing yet: EmptyState.
A step confirmation that goes away by itself: a notification with useNotifications.

Keyboard: it is not focusable; the action and secondary buttons have their own Tab stop. The component does not move focus.

Accessibility: by default it is announced on appearing (role="status"), with the tone written before the title and hidden from view: "Error: Payment declined". The prefix goes outside the heading, so when navigating by headings it is still just called "Payment declined". announce={false} when the result was already on the page when it loaded. The title is h2 by default (headingLevel, from 1 to 4). The icon is decorative.

Fine-tuning: CSS variables --amset-result-*: -padding-block, -padding-line, -icon (the side of the circle), -icon-drawing, -title, -font and -width (the most that the description and the detail measure: 34rem, 38rem in lg); the colors of the icon, in -tone and -tone-soft. The icon enters growing from the center; with reduced motion it simply appears.

What it looks like

Done:

Order confirmed

We've emailed you the receipt.

<Result
  title="Order confirmed"
  description="We've emailed you the receipt."
  tone="success"
  action={<Button variant="solid">View order</Button>}
/>

Props

Import it with import { Result } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`title`required	`string`	—
`action`	`ReactNode`	Main button: back to the order, retry the payment, go to the home page.
`announce`	`boolean`	Announces it on appearing. On by default: a result appears right after someone has done something (paying, sending, deleting) and finding out how it ended cannot depend on seeing a green icon.
`className`	`string`	Merged with the library classes; it does not replace them.
`description`	`ReactNode`	—
`detail`	`ReactNode`	Below the buttons: the order number, the technical detail of a failure.
`headingLevel`	`ResultHeadingLevel`	—
`icon`	`ReactNode`	Own icon. Decorative: what counts is the title.
`secondary`	`ReactNode`	—
`size`	`"sm" \| "md" \| "lg"`	`sm` inside a panel or a dialog; `lg` when it is the whole screen.
`tone`	`"info" \| "success" \| "warning" \| "error"`	How it ended: one of the status tones. It paints the icon. `success` by default.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

CSS variables

These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.

Variable	Default
`--amset-result-padding-block`	`var(--amset-space-8)`
`--amset-result-padding-line`	`var(--amset-space-5)`
`--amset-result-icon`	`3.5rem`
`--amset-result-icon-drawing`	`1.75rem`
`--amset-result-title`	`var(--amset-text-xl)`
`--amset-result-font`	`var(--amset-text-base)`
`--amset-result-width`	`34rem`
`--amset-result-tone`	`var(--amset-success)`
`--amset-result-tone-soft`	`var(--amset-success-soft)`

How to change it

.amset-result {
  --amset-result-padding-block: ...;
  --amset-result-padding-line: ...;
}

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: