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

Installation

Package: @bigbang/ui
Import: import { EmptyState } from '@bigbang/ui';
Source: EmptyState.tsx
Storybook: EmptyState · Playground

EmptyState is in the @bigbang/ui package.

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

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

Props

titleRequired

Description: What is empty, in a few words, such as "Henüz öğe yok".
Type: ReactNode

description

Description: Why it is empty and what to do next, in one or two sentences.
Type: ReactNode

icon

Description: Icon in a rounded tile above the title. Leave it out with media.
Type: IconName
Default: 'file'

media

Description: An illustration instead of the icon; mark it decorative (alt="").
Type: ReactNode

actions

Description: The next step: one primary Button and at most one secondary Button or Link.
Type: ReactNode

headingLevel

Description: Document level of the title. Match the page outline: 2 for a page section, 3 inside a card.
Type: 2 | 3 | 4
Default: 2

size

Description: md for a page or a large panel, sm inside a card, a table or a menu.
Type: 'sm' | 'md'
Default: 'md'

className

Description: For layout only: margins and placement.
Type: string

Data attributes

data-component="empty-state": on the root.