Feedback

Result

Full-width outcome page with a big status icon (or HTTP code), title, subtitle and actions. Covers success/error/info/warning plus 404, 403 and 500 pages.

Import

import { Result } from "@zephora/react";

Examples

Success

Payment received

Order #10382 will ship within 2 business days.

<Result
  status="success"
  title="Payment received"
  subtitle="Order #10382 will ship within 2 business days."
  extra={<Button>View order</Button>}
/>

HTTP status pages

The 404/403/500 statuses render the code as the visual.

Page not found

The page you are looking for does not exist.

<Result
  status="404"
  title="Page not found"
  subtitle="The page you are looking for does not exist."
  extra={<Button variant="outline">Back home</Button>}
/>

Error with actions

Submission failed

Some fields need your attention before resubmitting.

<Result
  status="error"
  title="Submission failed"
  subtitle="Some fields need your attention before resubmitting."
  extra={
    <>
      <Button>Try again</Button>
      <Button variant="ghost">Contact support</Button>
    </>
  }
/>

API

Result props

Prop	Type	Default	Description
`status` *	`"success" \| "error" \| "info" \| "warning" \| "404" \| "403" \| "500"`	—	Outcome the page communicates.
`title` *	`ReactNode`	—	Headline.
`subtitle`	`ReactNode`	—	Supporting copy under the title.
`extra`	`ReactNode`	—	Actions area (buttons, links).
`icon`	`ReactNode`	—	Replaces the built-in status icon.
`unstyled`	`boolean`	`false`	Headless mode — skips Zephora styling.