INDICATORS AND STATUS

Empty State

Draft

A content placeholder displayed when a view has no data, guiding users with context and a clear next step.

Usage

🔍

No results found

Try adjusting your search or filter criteria.

Common alternative names

Blank state, Zero state, No data

---

Anatomy

An empty state is a vertical stack of optional and required parts that guide the user when no content is available.

Badge illustration
(optional)

Headline
(required)

Paragraph
(optional)

Button
(optional)

📋

No results found

Try adjusting your search or filter criteria.

Usage guidelines coming soon.

Specs

Specs coming soon.

Content

Content guidelines coming soon.

Status & changelog

Status & changelog coming soon.

Code

---

Usage

import { EmptyState } from '@arch-ui/components';

function Example() {
  return (
    <EmptyState
      title="No results found"
      description="Try adjusting your search or filters to find what you are looking for."
      action={{ label: 'Clear filters', onClick: handleClear }}
    />
  );
}

---

Props

Prop	Type	Default	Description
title	string	required	Primary heading that explains the empty state.
description	string	undefined	Supporting text with additional context or guidance.
icon	ReactNode	undefined	Decorative illustration or icon rendered above the title.
action	{ label: string; onClick: () => void }	undefined	Primary call-to-action button displayed below the description.
secondaryAction	{ label: string; onClick: () => void }	undefined	Optional secondary action rendered alongside the primary action.
className	string	undefined	Additional CSS class names applied to the root element.

---

With icon

Provide an icon or illustration to add visual context. The icon is rendered above the title and is decorative (aria-hidden).

<EmptyState
  icon={<SearchIcon />}
  title="No results"
  description="We could not find any items matching your query."
/>

---

With actions

Use action for a primary CTA and secondaryAction for an alternative path.

<EmptyState
  title="No projects yet"
  description="Create your first project to get started."
  action={{ label: 'Create project', onClick: handleCreate }}
  secondaryAction={{ label: 'Learn more', onClick: handleLearnMore }}
/>

---

Guidelines

• Keep the title short and specific. Tell users what is missing, not what went wrong.
• Use the description to suggest a next step or explain how to populate the view.
• Limit actions to two at most. The primary action should solve the empty state directly.
• Avoid technical language. Write for the end user, not the developer.

---

Accessibility

• The root element uses a semantic landmark so assistive technology can identify the empty region.
• Icons should be decorative. If the icon conveys meaning on its own, provide an accessible label on the icon element.
• Action buttons follow standard Button accessibility patterns, including keyboard focus and activation.