# Empty States Need Clear Actions

**MUST** · **ID:** `design-ibelick-empty-states` · **Category:** design
**Source:** [@Ibelick](https://www.ui-skills.com/)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/design-ibelick-empty-states

> MUST: Give empty states one clear next action. "No results" with a button to adjust filters. "No items" with a button to create first item. Never leave users stuck.

Every empty state should have one clear action to guide users forward

Verbatim from the baseline-ui skill — one line under "Design". Our reasoning: an empty state is the first screen a new user sees, and "No items" is a dead end dressed up as information. It reports a fact the user can already see and withholds the only thing they need, which is what to do about it. Give it three parts — what this space is for, why it is empty right now, and one primary action that fills it — and note the word "one": two competing buttons hand the decision straight back. Distinguish the empty cases, too, because they need different actions: nothing created yet is an invitation, no search results is a prompt to widen the filter, and a load failure is a retry.

## Bad — do not do this

`design-ibelick-empty-states-bad`

```tsx
export function IbelickEmptyStatesBad() {
  return (
    <div className="space-y-4">
      <div className="p-8 border border-dashed rounded-lg text-center">
        <p className="text-muted-foreground">No projects found</p>
      </div>
      <p className="text-xs text-destructive">
        Empty state with no guidance - user doesn't know what to do next
      </p>
    </div>
  );
}
```

## Good — do this

`design-ibelick-empty-states-good`

```tsx
export function IbelickEmptyStatesGood() {
  return (
    <div className="space-y-4">
      <div className="p-8 border border-dashed rounded-lg text-center">
        <div className="size-12 mx-auto bg-muted rounded-full flex items-center justify-center mb-4">
          <svg className="size-6 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
          </svg>
        </div>
        <p className="font-medium">No projects yet</p>
        <p className="text-sm text-muted-foreground mt-1">
          Create your first project to get started
        </p>
        <button className="mt-4 px-4 py-2 bg-primary text-primary-foreground rounded-lg text-sm">
          Create Project
        </button>
      </div>
      <p className="text-xs text-success">
        Clear empty state with explanation and single call-to-action
      </p>
    </div>
  );
}
```

## References

- [ibelick — baseline-ui skill](https://raw.githubusercontent.com/ibelick/ui-skills/main/skills/baseline-ui/SKILL.md)
- [Empty State Design](https://www.nngroup.com/articles/empty-state-interface-design/)