Result

Beta

The outcome screen after a payment, transfer or order: success, pending, warning or failed.

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Add the component
$ npx ritla add result
Also works with shadcn: npx shadcn@latest add @ritla/result
Dependencies it brings
@phosphor-icons/react
Or copy by hand
Installing by hand copies the component's source into your project. The source comes with a Ritla UI license, so the CLI is the short way to the same files.

result.tsx

import { Result } from "@/components/ui/result";<Result status="success" title="Transfer sent" actions={<Button size="lg">Done</Button>} />

Prop	Type	Default	Description
`status`	`"success" \| "pending" \| "warning" \| "failed"`	None	Figma's Status.
`title / description`	`ReactNode`	None	Figma's Title and Description.
`illustration`	`ReactNode`	None	Figma's Visual: an illustration instead of the status icon.
`amount`	`ReactNode`	None	Figma's Show amount.
`details`	`ReactNode`	None	Figma's Details: a Description list.
`actions`	`ReactNode`	None	The primary and secondary buttons, full width.

The title is the section's heading; move focus to it when the screen appears (tabIndex=-1).
The status icon is decorative; the title carries the meaning.