Layout

General

Data Entry

Data Display

Feedback

Empty

Empty state placeholder.

Import: import { Empty } from '@kubed/components;'

Source: View source code

Docs: Edit this page

npm: @kubed/components

Documentation

Component Props

When To Use

When there is no data provided, display for friendly tips.

Basic Usage

() => {
  return <Empty desc={'No_Data'} />
};

1
() => {
2
  return <Empty desc={'No_Data'} />
3
};
4

Icon and ImageStyle

You can choose another style of image by setting icon and imageStyle.

() => {
  const { Add } = KubeIcon;
  return <Empty desc="No_Data" icon={<Add />} imageStyle={{ width: '48px', height: '48px' }} />;
};

1
() => {
2
  const { Add } = KubeIcon;
3
  return <Empty desc="No_Data" icon={<Add />} imageStyle={{ width: '48px', height: '48px' }} />;
4
};
5