status · @awesome-ds/react
EmptyState
内容がない理由と次の行動を示す空状態。
状態マトリクス
空
構造
- 任意の図版
- タイトル
- 説明
- 次の行動
キーボード操作契約
次の行動がある場合は標準のTab・EnterまたはSpace操作を使います。
スクリーンリーダー契約
見出しで空の状態を特定し、説明と次の行動を順に伝えます。
コンテンツ規則
- なぜ空なのかを説明します。
- 役立つ次の行動を一つ提示します。
公開API
| プロパティ | 型 | 必須 | 説明 |
|---|---|---|---|
title | string | 必須 | 領域の目的を示す見出し。 |
description | string | 必須 | 状態と次の手順を説明する本文。 |
actionLabel | string | — | 次の行動を示すラベル。 |
onAction | () => void | — | 次の行動を実行するコールバック。 |
環境適応契約
- RTL
- 論理方向の余白と配置を使い、DOMとフォーカスの順序を保ちます。方向を持つアイコンだけを反転します。
- ハイコントラスト
- 背景色だけに頼らず、境界・フォーカス・状態をシステムカラーでも判別可能にします。
- 動きを減らす設定
- 状態とフォーカスの連続性を残し、移動や装飾的な遷移を取り除きます。
検証ID
ライブ表示
ライブ表示
結果がありません
別の条件をお試しください。
コピー可能な実装例
import { EmptyState } from "@awesome-ds/react";
<EmptyState title="None" description="Add one" actionLabel="Create" />