EmptyState

What a list, a table, or a search shows when there is nothing in it, and what to do next.

Import

Copy code

import { EmptyState } from '@k8ordo/ui';

Usage

No posts yet

tsx

Copy code

<EmptyState title="No posts yet" />

Icon and Action

No matching posts

Removing a filter may bring some back.

tsx

Copy code

<EmptyState
  action={
    <Button color="base" size="sm" variant="outline">
      Clear filters
    </Button>
  }
  description="Removing a filter may bring some back."
  icon={<TableIcon size="lg" />}
  title="No matching posts"
/>

Table.EmptyState

Inside a table, use Table.EmptyState: it draws the same content in a row that spans the columns.

Name	Role
No members yet

tsx

Copy code

<Table.Root>
  <Table.Head>
    <Table.Row>
      <Table.HeaderCell>Name</Table.HeaderCell>
      <Table.HeaderCell>Role</Table.HeaderCell>
    </Table.Row>
  </Table.Head>
  <Table.Body>
    <Table.EmptyState colSpan={2} title="No members yet" />
  </Table.Body>
</Table.Root>

Props

title: Type: string; Default: -
action?: Type: ReactNode; Default: -
description?: Type: ReactNode; Default: -
icon?: Type: ReactNode; Default: -

Prop	Type	Default
`title`	`string`	-
`action?`	`ReactNode`	-
`description?`	`ReactNode`	-
`icon?`	`ReactNode`	-

Type base (some attrs are managed internally): HTMLAttributes<HTMLDivElement>