コンポーネント一覧
Toast
操作に必須の情報を置かない。自動で消えるため、読み落とすと取り返しがつかない。
デモ
使い分け
こうする
- 結果の報告に使う（保存した・削除した）
- 取り消せる操作には action で「元に戻す」を付ける
こうしない
- 確認や入力を求めない。Modal にする
- 同じ内容を連打で積まない。前の通知を閉じてから出す
Props
| 名前 | 型 | 説明 |
|---|---|---|
| color | 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | |
| radius | 'none' | 'sm' | 'md' | 'lg' | 'full' | |
| title | ReactNode | |
| description | ReactNode | |
| icon | ReactNode | |
| action | ReactNode | 補助操作。「元に戻す」など |
| timeout | number | 自動で閉じるまでのミリ秒。省略すると自動で閉じない |
| onClose | () => void | |
| classNames | ClassNames<typeof toastSlots> |
Slot
構成部位に data-slot が出力されます。 CSS の上書きやテストはこれを狙ってください。
- region必須
- root必須
- icon
- content必須
- title
- description
- closeButton
- action
アクセシビリティ
| キー | 動作 |
|---|---|
| Tab | 通知の中のボタンへ |
| Enter / Space（閉じる） | 通知を閉じる |
- live region として読み上げられる。閉じるボタンには `aria-label` がある
- キーボードだけで操作できます。フォーカスリングはコントラスト比 3:1 以上です。
- 本文のコントラスト比は light / dark とも 4.5:1 以上を検査で保証しています。
prefers-reduced-motionが有効なときはアニメーションを行いません。