> ## Documentation Index
> Fetch the complete documentation index at: https://www.canva.dev/docs/apps/llms.txt
> Use this file to discover all available pages before exploring further.

# Empty states

Guidelines for designing a simple and clean empty state.

Empty states help communicate that an app has no content to show, but also what kind of content a user should expect to see on the page.

An excellent empty state or page uses this opportunity to build trust, or provide suggestions that help users fix or continue their task.

Empty states are crucial when designing apps that use authentication or fetch, because some authenticated users may not have any content or data associated with their accounts.

For an example of how to implement this pattern, see the [Storybook](https://www.canva.dev/docs/apps/app-ui-kit/storybook/?path=/docs/patterns-empty-state-empty-state--docs).



<ol style={{ listStyleType: "none", paddingLeft: 0 }}>
  <li>
    <CalloutMarker>A</CalloutMarker> **Headline** stating what’s empty.
  </li>

  <li>
    <CalloutMarker>B</CalloutMarker> **Body** informs what’s needed to fill the
    page. Keep the message concise, informative, and actionable, using 1-2
    sentences.
  </li>

  <li>
    <CalloutMarker>C</CalloutMarker> One primary **call to action** button.
  </li>
</ol>

## Do



* Center the content.
* Use Title/Small for the headline and Body/Small for the body.
* Use `colorTypographyPrimary` for the headline and `colorTypographyPrimary` for the body.
* Spacing should be 8px/1u between headline and body, 16px/2u between body and primary button.
* Use a primary button for any action, including opening an external link.
* Offer templates or prompts that help users begin confidently.

## Don't



* Add illustrations or graphics.
* Use other typography styles for the headline.
* Use a link button for the primary action.