Result

Full result panel for the end of a flow or an error page: status icon, title, explanation, actions, optional extra.

Import

import { Result } from '@marbleui/ui'

Props

<Result>

Prop	Type	Default
status *required	`'info' \| 'success' \| 'warning' \| 'error' \| 403 \| 404`	`—`
title *required	`ReactNode`	`—`
actions	`ReactNode`	`—`
className	`string`	`—`
description	`ReactNode`	`—`
extra	`ReactNode`	`—`

Usage notes

Outcome panel for the end of a flow or a 403/404 page: status icon, title, explanation and next steps. For an empty list use EmptyState; for a message inside a page use Alert.

<Result
  status="success"
  title="Payment received"
  description="Order #10482 is confirmed. A receipt is on its way."
  actions={<><Button>View order</Button><Button variant="outline">Keep shopping</Button></>}
/>

status is success, error, warning, info, or the numbers 403 and 404 (not strings). The two codes show the number above the title with a neutral icon.
status="error" renders the panel as role="alert", announced when it appears. Other statuses use role="status", which isn’t reliably read when first inserted, so after a flow ends move focus to the panel’s first action.
The title is always an h2. On a standalone error page, keep an h1 elsewhere on the page.
extra adds a muted box below the actions for details, such as what failed.

Example source · show

import { Button } from '../button'
import { Result } from './result'

const Box = ({ children }: { children: React.ReactNode }) => <div className="w-[28rem] rounded-2xl border border-border bg-surface">{children}</div>
export const styles = {
  Success: () => <Box><Result status="success" title="Payment received" description="Order #10482 is confirmed. A receipt is on its way." actions={<><Button>View order</Button><Button variant="outline">Keep shopping</Button></>} /></Box>,
  Error: () => <Box><Result status="error" title="Submission failed" description="Fix the issues below and try again." actions={<Button>Back to form</Button>} extra={<ul className="list-disc pl-5 text-fg"><li>Tax ID is not valid for the Netherlands</li><li>Billing email bounced</li></ul>} /></Box>,
  '403': () => <Box><Result status={403} title="You don’t have access" description="Ask a workspace admin to invite you to this project." actions={<Button variant="outline">Request access</Button>} /></Box>,
  '404': () => <Box><Result status={404} title="Page not found" description="The link may be broken or the page was moved." actions={<Button>Go home</Button>} /></Box>,
}

Source: packages/ui/src/result/result.tsx

Catalog