Feedback

Page states

Loading, error, not found and empty, for a whole page or a panel.

import { PageState } from '@jsonresume/ui'Source(opens in a new tab)

Examples

Kinds

Loading jobs

No saved jobs

Jobs you mark as interested appear here.

404

Page not found

The page may have moved, or the address may be wrong.

Something went wrong

This part of the page failed to load. Try again in a moment.

Technical details

Error: GitHub returned 503 for gist resume.json

Show code

page-state/kinds.tsx

import { Button, Grid, PageState } from '@jsonresume/ui';

export default function PageStateKinds() {
  return (
    <Grid minColumnWidth="16rem" gap={4}>
      <PageState kind="loading" size="panel" title="Loading jobs" />
      <PageState
        kind="empty"
        size="panel"
        level={2}
        title="No saved jobs"
        description="Jobs you mark as interested appear here."
      />
      <PageState
        kind="not-found"
        size="panel"
        level={2}
        code="404"
        actions={<Button>Go home</Button>}
      />
      <PageState
        kind="error"
        size="panel"
        level={2}
        details="Error: GitHub returned 503 for gist resume.json"
        actions={<Button>Report a problem</Button>}
      />
    </Grid>
  );
}

Usage

Do

Say what happened and offer the next step.
Use the panel size for regions inside a page.

Don’t

Show a blank page while loading.
Show stack traces outside “Technical details”.

Accessibility

Errors are alerts; loading states are announced through a status region and set aria-busy.
Set level so the title fits the page outline.

Props

Also accepts the attributes of the element PageState renders.
Prop	Type	Default	Description
kind required	loadingerrornot-foundempty	–
actions	ReactNode	–	Buttons or links: Go home, Back to jobs.
code	ReactNode	–	Small label above the title, e.g. "404".
description	ReactNode	–
details	string	–	Technical details, collapsed by default.
level	123	1	Heading level of the title.
onRetry	(() => void)	–	Adds a Try again button for errors.
size	pagepanel	–	Whole page (default) or a panel within one.
title	ReactNode	–