Empty State

A placeholder for views with no data. Includes an icon or illustration, heading, description, and optional call-to-action.

Preview

No items yet

Create your first item to get started. Items will appear here once added.

In a card

No team members

Invite people to collaborate on this project.

Anatomy

1. Icon -- a simple SVG illustration or icon in muted colour.
2. Title -- short heading describing what's missing.
3. Description -- one or two sentences with context or next steps.
4. Action -- optional button to create the first item.

Props

Prop	Type	Default	Description
icon	ReactNode	--	Illustration or icon
title	string	--	Heading text
description	string	--	Body text
action	ReactNode	--	CTA button

Code example

React

import { EmptyState, Button } from '@thepace/lexicon/components';

<EmptyState
  icon={<FileIcon />}
  title="No items yet"
  description="Create your first item to get started."
  action={<Button variant="primary">Create item</Button>}
/>

Vanilla HTML

<div class="lex-empty-state">
  <span class="lex-empty-state__icon"><!-- icon --></span>
  <div class="lex-empty-state__title">No items yet</div>
  <div class="lex-empty-state__description">Create your first item.</div>
  <button class="lex-button lex-button--primary lex-button--md">Create</button>
</div>

CSS class reference

Class	Purpose
.lex-empty-state	Centred flex container
.lex-empty-state__icon	Icon/illustration
.lex-empty-state__title	Heading
.lex-empty-state__description	Body text

Accessibility

• Use aria-label on the container if it replaces a data view (e.g. "No results found").
• The CTA button should be focusable and clearly labelled.

Guidelines

Do

• Always include a clear next-step action when possible.
• Use a relevant icon that hints at the expected content type.

Don't

• Don't leave empty views completely blank — always show context.
• Don't use generic messages like "Nothing here" — be specific.