Empty & error state

Template pattern for zero-results searches, first-run states, and error screens. Aligned with J&J DS v1.2 (Figma 22519:88854). Pass tone="empty" for neutral icon or tone="error" for the brand-red X icon. Override the icon via icon or add an illustration via illustration.

Empty state

Zero-results search. Primary action clears the search; secondary creates a new item.

No projects found

Your search “Lorem ipsum dolores sed atis” did not match any projects. Please try again or create a new project.

Show source

<EmptyState
  tone="empty"
  headline="No projects found"
  description='Your search "Lorem ipsum dolores sed atis" did not match any projects. Please try again or create a new project.'
  actions={
    <>
      <Button variant="primaryAlt">Clear search</Button>
      <Button variant="secondary"><Icon icon={Plus} size="xs" />New project</Button>
    </>
  }
/>

Error state

Unexpected failure. Primary action retries; secondary returns to a safe location.

Something went wrong on our end

This text provides a possible explanation for the error and offers ways to solve it.

Show source

<EmptyState
  tone="error"
  headline="Something went wrong on our end"
  description="This text provides a possible explanation for the error and offers ways to solve it."
  actions={
    <>
      <Button variant="primaryAlt">Try again</Button>
      <Button variant="secondary">Back to home</Button>
    </>
  }
/>

Custom icon

Pass any ReactNode via `icon` to override the tone's default. Inbox here marks an onboarding empty state.

Inbox zero

No new notifications. Check back later or browse the archive.

Show source

<EmptyState
  icon={<Icon icon={Inbox} size="xl" />}
  headline="Inbox zero"
  description="No new notifications. Check back later or browse the archive."
  actions={<Button variant="ghost">View archive</Button>}
/>

Centered alignment

Set `align='center'` when the state is the sole content of a page — e.g. route-level 404s.

Page not found

We couldn't find what you're looking for. It may have moved or been removed.

Show source

<EmptyState
  tone="empty"
  align="center"
  icon={<Icon icon={FileQuestion} size="xl" />}
  headline="Page not found"
  description="We couldn't find what you're looking for. It may have moved or been removed."
  actions={<Button variant="primaryAlt">Go home</Button>}
/>