EmptyState

リストや表、検索の結果が空のときに、その旨と次の一手を示す

インポート

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

使い方

No posts yet

tsx
<EmptyState title="No posts yet" />

アイコンと操作

No matching posts

Removing a filter may bring some back.
tsx
<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

表の中では Table.EmptyState を使う。列をまたぐ行の中に、同じ内容を描く。

NameRole

No members yet

tsx
<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: -

型ベース（内部で固定する一部attrsは除外）: HTMLAttributes<HTMLDivElement>

Components