Result

The whole-page outcome — not found, forbidden, server error, done. Announced on render, so a client-side route change to an error page is not silent for a screen reader.

src/components/ui/result.tsx

About

From the component's own source, where it was written.

The whole-page outcome: not found, forbidden, server error, done.

**Distinct from Empty, and the difference matters.** An empty state means "this worked, there is nothing here yet" and its job is to invite a first action. A result means "your request ended this way" — it reports a status, often one the user cannot fix, and its job is to say what happened and where to go next. Using an empty state for a 403 tells someone to create something they are not allowed to see.

**Every status offers a way out.** A 404 with no link is a dead end that sends people to the back button; the actions slot is where the escape goes, and the presets set an icon and tone but never invent the copy — only you know whether "Go back" or "Contact support" is right.

The status is announced: errors get role="alert", everything else role="status", so a client-side route change to an error page is not silent for a screen reader — which is the failure mode of every SPA that renders one of these without saying anything.

Install

npx astralyx-ui add result

Usage

import { Result } from '@/components/ui/result'

<Result status="404" title="No such page" actions={<Button>Go home</Button>} />

Composer

Change the props and the source below follows.

404

We could not find that page

The link may be out of date, or the page may have moved.

Props

status

compact

tsx

<Result
  status="404"
  title="We could not find that page"
  actions={<Button>Go home</Button>}
/>

Examples

A 404 with a way out

tsx

<Result status="404" title="We could not find that page" actions={<Button>Go home</Button>} />

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`Result`

The whole-page outcome: not found, forbidden, server error, done.

Extends Omit<ComponentProps<'div'>, 'title'>.

Prop	Type	Default	Description
status	ResultStatus	'info'	'success' \| 'error' \| 'warning' \| 'info' \| '404' \| '403' \| '500'. Sets an icon and tone; never the copy.
title	ReactNode	required	—
description	ReactNode	—	—
actions	ReactNode	—	A result with no way onward is a dead end that sends people to the back button.
icon	ReactNode	—	Replaces the preset icon.
details	ReactNode	—	Collapsed. Stack traces and request ids — whatever a support ticket would want.
compact	boolean	false	—

Types

Type	Definition	Description
`ResultStatus`	'success' \| 'error' \| 'warning' \| 'info' \| '404' \| '403' \| '500'	—

Behaviour

Topic	Detail	Description
vs Empty	a real difference	Empty means "this worked, there is nothing here yet" and invites a first action. A result reports how a request ended, often one the user cannot fix. Using an empty state for a 403 tells someone to create what they are not allowed to see.
announced	role=alert \| status	Errors are assertive, the rest polite — an SPA that renders an error page silently is the standard failure.