Skip to content

Empty State

What a list or page shows before it has content, with the action that fills it.

No orders yet

Your first bag ships the Friday after you subscribe. Orders and tracking show up here.

import { Button, EmptyState } from '@brand-studio/ui';

export default function EmptyStateDemo() {
  return (
    <div style={{ width: '100%', maxWidth: 460 }}>
      <EmptyState
        icon={<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M4 7h16l-1.5 11a2 2 0 0 1-2 1.7h-9a2 2 0 0 1-2-1.7Z" /><path d="M9 7V5a3 3 0 0 1 6 0v2" /></svg>}
        title="No orders yet"
        description="Your first bag ships the Friday after you subscribe. Orders and tracking show up here."
        action={<Button>Choose a coffee</Button>}
      />
    </div>
  );
}

Installation

pnpm add @brand-studio/ui

npm install @brand-studio/ui

yarn add @brand-studio/ui

bun add @brand-studio/ui

Install the peer dependencies
```
npm install react react-dom
```
Import the stylesheet once
```
import '@brand-studio/ui/styles.css';
```

Wrap your app in a brand theme

import { BrandTheme, EmptyState } from '@brand-studio/ui';
import brand from './brand.json';

<BrandTheme palette={brand.tokens} mode="system">
  {/* your app */}
</BrandTheme>

Usage

import { EmptyState } from '@brand-studio/ui';

<EmptyState
  title="No orders yet"
  description="Your first bag ships the Friday after you subscribe."
  action={<Button>Choose a coffee</Button>}
/>

Accessibility

The title is an <h3>. The icon is decorative and hidden from screen readers.
Say what will appear here and give one action that makes it appear. Skip the action when the person cannot fix the emptiness.

API Reference

Prop	Type	Default
`icon?`	`React.ReactNode`	–
`title`	`React.ReactNode`	–
`description?`	`React.ReactNode`	–
`action?`	`React.ReactNode`	–
`className?`	`string`	`''`