import Example from "../../components/example";
import Layout from "../../components/layout";

import EmptyState from "examples/empty-state/empty-state.tsx";
import Loading from "examples/empty-state/loading.tsx";

export default Layout;

# Empty State

Empty states are messages that users see when there is no data or content to show. They can appear
during onboarding and first time use, after successfully clearing a cue of tasks, and sometimes
during movements of failure.

## Examples

Use an empty state for educational messages, success states and cleared states, or failure states.

<Example title="Empty state" path="empty-state/empty-state.tsx">
  <EmptyState />
</Example>

<Example title="Loading" path="empty-state/loading.tsx">
  <Loading />
</Example>