PackagesUIComponents
Toast
操作結果をユーザーに一時的に通知する非ブロッキングなフィードバック。
いつ使うか
- フォーム送信、データ保存、削除などの操作が成功・失敗した後のフィードバックに使用する
- ユーザーの作業フローを中断せずに結果を通知したいとき
- 数秒で自動的に消えても問題ない情報を伝えるとき
いつ使わないか
- フォームのバリデーションエラーには使わない。インラインの
FormFieldエラーメッセージを使用する - ユーザーの判断が必要な場面には使わない。
ConfirmDialogを使用する - 重大なエラー（認証切れ等）には使わない。
AlertDialogまたはページ遷移で対応する - 長文の説明が必要な場合は使わない
Usage
アプリのルートレイアウトに Toaster を配置し、任意の場所から toast() を呼び出す。
// layout.tsx
import { Toaster } from '@bi-shop-it/ui/toaster';
const Layout = ({ children }: { children: React.ReactNode }) => (
<>
{children}
<Toaster />
</>
);// 任意のコンポーネント
import { toast } from '@bi-shop-it/ui/toaster';
const handleSave = async () => {
try {
await saveData();
toast({ title: '保存しました', variant: 'success' });
} catch {
toast({
title: '保存に失敗しました',
description: 'しばらくしてからもう一度お試しください。',
variant: 'destructive',
});
}
};Props
toast() の引数
| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
title | string | — | 通知のタイトル（必須） |
description | string | undefined | 補足テキスト |
variant | 'default' | 'success' | 'warning' | 'destructive' | 'info' | 'default' | 通知の種類。アイコンと左ボーダーの色が変わる |
duration | number | 5000 | 自動消去までの時間（ミリ秒） |
action | { label: string; onClick: () => void } | undefined | トースト内のアクションボタン |
dismissToast()
| 引数 | 型 | 説明 |
|---|---|---|
id | string | 消すトーストのID。省略時は全て消去する |
toast() はトーストのIDを返す。このIDを dismissToast() に渡すことで個別に消去できる。
バリアント
toast({ title: '保存しました', variant: 'success' });
toast({ title: '変更が未保存です', variant: 'warning' });
toast({ title: '削除に失敗しました', variant: 'destructive' });
toast({ title: '新しいバージョンがあります', variant: 'info' });説明付き
toast({
title: '保存に失敗しました',
description: 'しばらくしてからもう一度お試しください。',
variant: 'destructive',
});アクション付き
toast({
title: '項目を削除しました',
action: {
label: '元に戻す',
onClick: () => undoDelete(),
},
});アクセシビリティ
コンポーネントが内部で処理すること
- Radix UIの
Toastプリミティブを使用し、WAI-ARIAのToastパターンに準拠する aria-live="polite"リージョン内にトーストを配置し、スクリーンリーダーに通知する- 閉じるボタンに
aria-label="閉じる"を付与する - アクションボタンの
altTextをスクリーンリーダー向けに提供する - 装飾アイコンに
aria-hidden="true"を付与する
利用者が対応すること
- 自動消去の
durationは十分な長さを確保する（デフォルト5000msを推奨） - 重要な情報（エラー等）はToastだけに頼らず、他の手段でも伝える
関連コンポーネント
ConfirmDialog— ユーザーの判断が必要な場面で使用する。Toastは一方的な通知のみAlertDialog— 重大なエラーなど、確実にユーザーの注意を引きたい場面で使用するStatusBadge— 状態を永続的に表示する場合に使用する。Toastは一時的な通知