PackagesUIComponents
Alert
操作結果やシステム状態をコンテンツ内にインラインで表示するフィードバックコンポーネント。
いつ使うか
- フォーム送信後のバリデーションエラーや成功メッセージを、該当セクション内に表示する
- API呼び出しの失敗など、特定の操作に紐づくエラーを表示する
- 注意事項や補足情報を、関連するコンテンツの近くに表示する
いつ使わないか
- アプリ全体に関わるグローバルな通知（メンテナンス告知等）には使わない。Banner を使用する
- ユーザーが読まなくても問題ない一時的な通知（「保存しました」等）には使わない。
Toastを使用する - 操作前に確認を挟む場合は使わない。
Dialogを使用する
Usage
import { Alert } from '@bi-shop-it/ui/alert';
<Alert title="入力内容にエラーがあります" variant="destructive" />;Props
| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
title | string | — | メッセージのタイトル |
description | string | — | タイトルの補足説明 |
variant | 'info' | 'warning' | 'destructive' | 'success' | 'info' | ステータスの種類。アイコンと配色が自動で変わる |
バリアント
variant に応じてアイコンと配色が自動で切り替わる。
<Alert title="新しいバージョンが利用可能です" />
<Alert title="未保存の変更があります" variant="warning" />
<Alert title="データの取得に失敗しました" variant="destructive" />
<Alert title="設定を保存しました" variant="success" />状態
タイトルと説明
description を指定すると、タイトルの下に補足説明を表示する。
<Alert
description="初回ログイン時にパスワードの変更が必要です。"
title="パスワードの変更が必要です"
/>タイトルのみ
description を省略すると、タイトルのみの簡潔な表示になる。
<Alert title="設定を保存しました" variant="success" />アニメーション
条件付きレンダリングで表示すると、フェードイン + 微かなスライドで自然に現れる。prefers-reduced-motion: reduce が有効な場合、アニメーションは自動で無効化される。
アクセシビリティ
コンポーネントが内部で処理すること
role="alert"を付与し、動的に表示された場合にスクリーンリーダーが自動で読み上げる- ステータスアイコンに
aria-hidden="true"を付与し、装飾としてスクリーンリーダーから隠す - 色だけでなくアイコンでもステータスの種類を伝える
利用者が対応すること
- 特になし
関連コンポーネント
Toast— ユーザーが読まなくても問題ない一時的な通知に使用する。自動で消えるStatusBadge— テーブルやリスト内でステータスをインラインで示す小さなラベルに使用する