Components

EmptyState

An explanation and the next step shown when a page, panel or list is still empty or a search finds nothing.

Storybook: Storybook
Source: Source

The example below loads live from Storybook; open it in Storybook to use the controls.

Live example, StorybookOpen in Storybook

Default

An icon, a title, a description and one primary action. The component fades in when it mounts.

No items yet

Your first item will be listed here once you add it.

import { Button, EmptyState, Icon } from '@bigbang/ui';

export default function Default() {
  return (
    <EmptyState
      title="No items yet"
      description="Your first item will be listed here once you add it."
      actions={
        <>
          <Button startIcon={<Icon name="plus" />}>Add item</Button>
          <Button variant="tertiary">Learn more</Button>
        </>
      }
    />
  );
}

No results

When a search or filter finds nothing, offer a way out such as clearing the filters.

No results found

Change your search and try again.

import { Button, EmptyState } from '@bigbang/ui';

export default function NoResults() {
  return (
    <EmptyState
      icon="search"
      title="No results found"
      description="Change your search and try again."
      actions={<Button variant="secondary">Clear filters</Button>}
    />
  );
}

In a card

size="sm" is for cards, tables and menus. Set the title level to fit the page outline with headingLevel.

Card title

No items yet

Your first item will be listed here once you add it.

import { Button, EmptyState, Heading } from '@bigbang/ui';

export default function InCard() {
  return (
    <div className="max-w-sm rounded-lg border border-line-subtle bg-surface-raised p-lg">
      <Heading level={2} size="sm">
        Card title
      </Heading>
      <EmptyState size="sm" headingLevel={3} title="No items yet" description="Your first item will be listed here once you add it." actions={<Button size="sm">Add item</Button>} />
    </div>
  );
}

Light and dark mode

The icon tile uses color-surface-sunken and the icon color-icon-subtle.

No items yet

Your first item will be listed here once you add it.

No items yet

Your first item will be listed here once you add it.

import { Button, EmptyState, Icon } from '@bigbang/ui';

export default function Default() {
  return (
    <EmptyState
      title="No items yet"
      description="Your first item will be listed here once you add it."
      actions={
        <>
          <Button startIcon={<Icon name="plus" />}>Add item</Button>
          <Button variant="tertiary">Learn more</Button>
        </>
      }
    />
  );
}