# Core/EmptyState - Design

The EmptyState component is used to display a message when there is no data to display. Illustrations are lazy-loaded and support light/dark themes via the theme prop.

## Properties

### Title

All empty states have a title. Titles provide a brief summary of the reason an empty state is shown.

### Description

All empty states have a description. Descriptions provide the details and instructions on next steps the user can take.

### Action (optional)

A call to action can be used to provide quick access to relevant next steps. Full page empty states use a primary button. Smaller empty states use a secondary button.

### Illustration

All empty states have an illustration. Pass an illustration slug (e.g. `EmptyFolder`, `PizzaBox`) via the `illustration` prop.

Use the `theme` prop (`light` or `dark`) to switch between light/dark variants when the illustration supports them. Illustrations are lazy-loaded for optimal bundle size.

## Content

### Title / explanation format

This format allows empty states to provide both a catchy main title and a more detailed explanation. The title should provide the broad action with the explanation providing additional detail.

Titles should be in sentence format with no ending punctuation. Descriptions should be in sentence format with ending punctuation.

### Call to action

A call to action enables users to easily move forward from an empty state. It can take the form of a link embedded within the description to send the user to another page, or a button to perform an action.

Full page empty states (`size="lg"`) should use a primary button, as the action is the primary next step for the user. Smaller empty states should use a secondary button if the action is already present elsewhere on the page.

### Description wrapping

Descriptions will wrap if the parent container is small enough, but strings should be kept short when possible.

### Graphs

When using graph tiles, an empty state should be smaller to match the size of the graph tile.