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
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'icon' | 'default' | default: アバターや画像向けの大きめの円形エリア（size-16）。icon: アイコン向けの小さめの円形エリア（size-12、text-muted-foreground付き） |
className | string | - | 追加のCSSクラス |
その他のサブコンポーネント
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | 追加のCSSクラス（Empty / EmptyHeader / EmptyTitle / EmptyDescription / EmptyContent 共通） |
...props | React.HTMLAttributes | - | 対応するHTML要素の標準属性をそのまま渡せます |
構造
| コンポーネント | 役割 |
|---|---|
Empty | 全体のコンテナ（中央寄せ・縦並び） |
EmptyHeader | アイコン・タイトル・説明をまとめるヘッダー |
EmptyMedia | アイコンやアバターを表示する円形エリア |
EmptyTitle | タイトル（見出し） |
EmptyDescription | 説明文 |
EmptyContent | アクションボタン等を配置するエリア（ヘッダーの下） |