Empty state

An empty state appears when there is no data to display and describes what the user can do next.

#Default

Say what lives here and what to do first.

No conversations yet

When a customer starts a conversation, it appears here.

import { Button, EmptyState } from '@wolf-rayet/react';

<EmptyState
  header="No conversations yet"
  description="When a customer starts a conversation, it appears here."
  primaryAction={<Button appearance="primary">Add a channel</Button>}
  secondaryAction={<Button>Learn about channels</Button>}
/>

#No results

Use a narrower message when a search or filter returns nothing.

No results

No conversations match these filters. Try widening the date range.

import { Button, EmptyState } from '@wolf-rayet/react';

<EmptyState
  header="No results"
  description="No conversations match these filters. Try widening the date range."
  primaryAction={<Button>Clear filters</Button>}
/>