Empty State
Explain why a region has no rows and what the next action is.
Blank slate
First visit to a resource that has never been created. Title is Title Case. Description adds a next step.
No Deployments
Push to your Git repository to create your first one.
Informational
Default slot is the action row. One primary Button, optional secondary ButtonLink. Never three CTAs.
No Projects
Create a project to deploy previews, inspect logs, and invite the team.
1
<EmptyState
2
title="No Projects"
3
description="Create a project to deploy previews, inspect logs, and invite the team."
4
>
5
<template #icon>
6
<EmptyStateIcon>
7
<Icon :icon="Folder01Icon" :size="32" />
8
</EmptyStateIcon>
9
</template>
10
<Button size="small">Create Project</Button>
11
<ButtonLink href="/" variant="tertiary" size="small">
12
Learn more
13
</ButtonLink>
14
</EmptyState>
No results
A filter or search returned zero rows. Quote a single query. Offer a clear way back to the full list.
No Logs Match Your Filter
No logs match “production”. Clear the filter to see all logs.
1
<EmptyState
2
title="No Logs Match Your Filter"
3
description="No logs match “production”. Clear the filter to see all logs."
4
>
5
<template #icon>
6
<EmptyStateIcon>
7
<Icon :icon="Search01Icon" :size="32" />
8
</EmptyStateIcon>
9
</template>
10
<Button size="small" variant="secondary">Clear Filter</Button>
11
</EmptyState>
Slots
title, description, and icon also accept slots when the copy is not a plain string.
No Team Members
Invite a teammate to share deployments and logs.
1
<EmptyState>
2
<template #icon>
3
<EmptyStateIcon>
4
<Icon :icon="Folder01Icon" :size="32" />
5
</EmptyStateIcon>
6
</template>
7
<template #title>No Team Members</template>
8
<template #description>
9
Invite a teammate to share deployments and logs.
10
</template>
11
<Button size="small">Invite Member</Button>
12
</EmptyState>
Best practices
- Pick the story by cause: blank slate for a resource that does not exist yet, no-results after a filter, permission when the route is gated, error when a load failed.
EmptyStateIconis the framed glyph. Put<Icon>in its default slot. Theiconprop also accepts Hugeicons data if you are not using a slot.- Title Case on the title. Sentence case on the description, and do not restate the title. CTA labels are Title Case Verb + Noun — not Get Started or OK.
- One primary action. A second control is fine when the first step is genuinely a fork (Import Repository vs Deploy Template).
- Persistent warnings do not belong here. They disappear when the list fills — use Note or the page header.
- After an async filter change, wrap the region in
aria-live="polite"so the new state is announced.