Feedback

Empty state

What to show when there is nothing yet, and the next step to take.

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

Examples

Basic

No resume found

Create a gist named resume.json on GitHub, or start from the editor.

empty-state/basic.tsx

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

export default function EmptyStateBasic() {
  return (
    <EmptyState
      title="No resume found"
      action={<Button variant="primary">Create a resume</Button>}
    >
      Create a gist named resume.json on GitHub, or start from the editor.
    </EmptyState>
  );
}

With an icon

No matching jobs yet

We match your resume against Hacker News hiring posts every day. Check back tomorrow.

empty-state/with-icon.tsx

import { Button, EmptyState } from '@jsonresume/ui';
import { Briefcase } from 'lucide-react';

export default function EmptyStateWithIcon() {
  return (
    <EmptyState
      icon={<Briefcase size={32} strokeWidth={1.5} />}
      title="No matching jobs yet"
      action={<Button>Edit your skills</Button>}
    >
      We match your resume against Hacker News hiring posts every day. Check
      back tomorrow.
    </EmptyState>
  );
}

Accessibility

Keep the action a real button or link.
The icon is decorative; the title carries the meaning.

Props

Also accepts the attributes of the element EmptyState renders.
Prop	Type	Default
title required	ReactNode	–
action	ReactNode	–
icon	ReactNode	–