ホーム/コンポーネント/データ表示/空状態 EmptyState

EmptyState

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

import { EmptyState } from "@blueai/ui"

Examples

With Action

📄

まだ請求書がありません

最初の請求書を作成して、請求業務を始めましょう。

<EmptyState
  icon={<span className="text-[32px]">📄</span>}
  title="まだ請求書がありません"
  description="最初の請求書を作成して、請求業務を始めましょう。"
  action={
    <FormButton variant="primary" size="sm">
      + 最初の請求書を作成
    </FormButton>
  }
/>

Without Action

🔍

検索結果がありません

別のキーワードで検索してみてください。

<EmptyState
  icon={<span className="text-[32px]">🔍</span>}
  title="検索結果がありません"
  description="別のキーワードで検索してみてください。"
/>

Props

Prop	Type	Default	Description
icon	ReactNode	—	表示するアイコン
title*	string	—	タイトル
description	string	—	説明テキスト
action	ReactNode	—	アクションボタン等