Caroa UI

Empty

データがない状態を表示する空状態コンポーネント。

インポート

import {
  Empty,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
  EmptyDescription,
  EmptyContent,
} from '@caroainc/ui-components/client'

個別サブパス（バンドルサイズを抑えたい場合）:

import {
  Empty,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
  EmptyDescription,
  EmptyContent,
} from '@caroainc/ui-components/empty'

Empty は合成コンポーネントです。EmptyHeader の中に EmptyMedia（アイコン等）・EmptyTitle・EmptyDescription を並べ、EmptyContent にアクションボタン等を配置します。

基本的な使い方

Loading...
<Empty>
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <Icon name="Inbox" size="lg" />
    </EmptyMedia>
    <EmptyTitle>データがありません</EmptyTitle>
    <EmptyDescription>新しいアイテムを追加してください</EmptyDescription>
  </EmptyHeader>
</Empty>

検索結果なし（アクション付き）

EmptyContent にボタン等のアクションを配置できます。

Loading...
<Empty>
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <Icon name="Search" size="lg" />
    </EmptyMedia>
    <EmptyTitle>検索結果がありません</EmptyTitle>
    <EmptyDescription>別のキーワードで検索してください</EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button variant="outline">検索条件をクリア</Button>
  </EmptyContent>
</Empty>

ファイルなし

Loading...
<Empty>
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <Icon name="FolderOpen" size="lg" />
    </EmptyMedia>
    <EmptyTitle>ファイルがありません</EmptyTitle>
    <EmptyDescription>ファイルをアップロードして始めましょう</EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button variant="primary">
      <Icon name="Upload" size="sm" />
      アップロード
    </Button>
  </EmptyContent>
</Empty>

アバターを使う（EmptyMedia の default バリアント）

EmptyMedia の variant="default"（デフォルト値）は、アイコン用の icon より一回り大きい円形エリアです。Avatar やイラスト画像を入れる用途を想定しています。

Loading...
<Empty>
  <EmptyHeader>
    <EmptyMedia>
      <Avatar>
        <AvatarFallback>?</AvatarFallback>
      </Avatar>
    </EmptyMedia>
    <EmptyTitle>メンバーがいません</EmptyTitle>
    <EmptyDescription>チームにメンバーを招待しましょう</EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button>
      <Icon name="UserPlus" size="sm" />
      メンバーを招待
    </Button>
  </EmptyContent>
</Empty>

エラー状態

Loading...
<Empty>
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <Icon name="AlertTriangle" size="lg" />
    </EmptyMedia>
    <EmptyTitle>エラーが発生しました</EmptyTitle>
    <EmptyDescription>データの読み込みに失敗しました</EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button variant="outline">
      <Icon name="RefreshCw" size="sm" />
      再試行
    </Button>
  </EmptyContent>
</Empty>

Props

Empty / EmptyHeader / EmptyTitle / EmptyDescription / EmptyContent はいずれも対応するHTML要素（div または h3 / p）の標準属性（className含む）をそのまま受け取ります。EmptyMedia のみ独自の variant propを持ちます。

EmptyMedia

PropTypeDefaultDescription
variant'default' | 'icon''default'default: アバターや画像向けの大きめの円形エリア（size-16）。icon: アイコン向けの小さめの円形エリア（size-12、text-muted-foreground付き）
classNamestring-追加のCSSクラス

その他のサブコンポーネント

PropTypeDefaultDescription
classNamestring-追加のCSSクラス（Empty / EmptyHeader / EmptyTitle / EmptyDescription / EmptyContent 共通）
...propsReact.HTMLAttributes-対応するHTML要素の標準属性をそのまま渡せます

構造

コンポーネント役割
Empty全体のコンテナ（中央寄せ・縦並び）
EmptyHeaderアイコン・タイトル・説明をまとめるヘッダー
EmptyMediaアイコンやアバターを表示する円形エリア
EmptyTitleタイトル（見出し）
EmptyDescription説明文
EmptyContentアクションボタン等を配置するエリア（ヘッダーの下）

Previous

DropdownMenu

Next

Field

On this page