EmptyState

When to use

EmptyState explains why there is nothing to show and what to do, instead of a blank area: a list with no items yet, a search with no results, a panel with nothing to access.

When not to use

• For the outcome of a task: Use ResultState.
• While content loads: Use Skeleton.
• For an error: Use InlineAlert.

Anatomy

No items yet

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

Add itemLearn more

LightDark

Copy code

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>
        </>
      }
    />
  );
}

1. Icon tile or illustration: Decorative.
2. Title: A document heading.
3. Description.
4. Actions: One primary, at most one secondary.

Behaviour

• It is centred and takes the width of its area; text lines stop at 440 px.
• It fades in when it mounts.

Guidelines

• Say in the title what is empty; avoid general phrases such as “No data”.
• Explain the next step in the description.
• Leave out actions when there is nothing the person can do.

Content

Turkish	English
Henüz öğe yok	No items yet
Sonuç bulunamadı	No results found
Filtreleri temizle	Clear filters

Related components

• ResultState: The end of a task.
• Skeleton: While loading.
• Heading: Heading levels.