Empty

A component that displays an empty state.

Installation

pnpm add @wandercom/design-system-web

Usage

import { Empty } from '@wandercom/design-system-web/blocks/empty';

export function Example() {
  return (
    <Empty 
      action={{ label: "Clear search", onClick: () => setSearch("") }} 
      icon={<IconSearch />} 
      secondaryText="Try a different search" 
      text="No items found" 
    />
  );
}

Examples

Default

Radio group with a default value set and without a default value set.

Loading example...
<Empty
  action={{
    label: "Clear search",
    onClick: () => {},
  }}
  icon={<IconMagnifyingGlass />}
  secondaryText="Try a different search"
  text="No items found"
/>

Props

RadioGroup

id

string?
HTML id for the empty state container.

text?

string
Text to display in the empty state.

icon?

React.ReactNode
Icon to display in the empty state.

secondaryText?

string
Secondary text to display in the empty state.

action?

{ label: string; onClick: () => void }
Action button to display in the empty state.

className?

string
Additional CSS classes to apply.
Empty