build69
Sign inGet API key
build69  /  Components  /  Feedback & Status  /  Result

Result

v1.0.1Updated 20 Jul 2026

Outcome block for an operation the user just performed or a route resolving to an HTTP error. Big tone-colored status icon (or large dimmed code typography for 403/404/500), title, subtitle, actions slot, and an optional

View source← Back to catalog

Preview

Live · 9 stories
DefaultOpen ↗
▸Why this is recommendedresultoutcomestatuserror-page+5

The default, out-of-the-box Result.

Recommended for+14
  • ✓Post-submit confirmation screens (invoice sent, tax filed)
  • ✓Full-page 403 / 404 / 500 routes
  • ✓Import/batch job outcomes with warnings
  • ✓Failed-payment retry screens
Tags+6
resultoutcomestatuserror-page404403500successdefault
Features+4
  • Statuses: success / info / warning / error / 403 / 404 / 500
  • Semantic statuses render a tone-colored soft icon badge (shared surface() recipe)
  • HTTP statuses render large dimmed status-code typography
  • Sizes: compact / default / spacious
  • extra slot for action buttons, children slot for detail area (error digest, receipt)
  • Per-status default title + subtitle, overridable
  • role="alert" for error/500, role="status" otherwise, with aria-labelledby/describedby
  • motion-safe entrance animation (respects prefers-reduced-motion)
  • Custom icon override
Not recommended for−2
  • ✕Places with no content yet (use EmptyState)
  • ✕Inline contextual messages (use Alert)
  • ✕Transient feedback (use Sonner toasts)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "Result" })

Usage

import { Result } from '@/components/feedback/result';

<Result
  status="success"
  title="Invoice sent"
  subtitle="INV-2026-0042 was emailed to the customer."
  extra={<Button tone="primary">Back to invoices</Button>}
/>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
status

Outcome kind; HTTP codes render big dimmed typography

'success' | 'info' | 'warning' | 'error' | '403' | '404' | '500'—
title

Headline (defaults per status)

ReactNode—
subtitle

Supporting line (defaults per status)

ReactNode—
extra

Actions slot under the text

ReactNode—
icon

Custom visual replacing the default icon / code

ReactNode—
size

Visual density

'compact' | 'default' | 'spacious'—
children

Detail area below actions (error digest, receipt summary)

ReactNode—

Related

Platform docsAll componentsSource files