コンポーネント一覧
Modal
作業を中断させる重さがある。確認や入力が本当に必要なときだけ使い、通知には Toast を使う。
デモ
使い分け
こうする
- 取り消せない操作の確認、または 1 画面で完結する短い入力に使う
- タイトルは質問か動作で書く（「削除しますか」）
こうしない
- 長いフォームを入れない。ページにする
- Modal の上に Modal を重ねない。Flatlay では表現できない
Props
| 名前 | 型 | 説明 |
|---|---|---|
| size | NoviSize | 'full' | |
| radius | 'none' | 'sm' | 'md' | 'lg' | 'full' | |
| isOpen | boolean | |
| defaultOpen | boolean | |
| onOpenChange | (isOpen: boolean) => void | |
| isDismissable | boolean | 背景クリックで閉じられるようにする |
| isKeyboardDismissDisabled | boolean | Escape で閉じるのを無効にする |
| children | ReactNode | |
| classNames | ClassNames<typeof modalSlots> |
Slot
構成部位に data-slot が出力されます。 CSS の上書きやテストはこれを狙ってください。
- backdrop必須
- panel必須
- header
- title
- closeButton
- body必須
- footer
アクセシビリティ
| キー | 動作 |
|---|---|
| Tab / Shift+Tab | 中の要素を巡回（外へ出ない） |
| Escape | 閉じる |
- 開いている間フォーカスは内側に閉じ込められ、Escape で閉じる （`isKeyboardDismissDisabled` で無効化できる）。閉じるボタンには `aria-label` がある
- キーボードだけで操作できます。フォーカスリングはコントラスト比 3:1 以上です。
- 本文のコントラスト比は light / dark とも 4.5:1 以上を検査で保証しています。
prefers-reduced-motionが有効なときはアニメーションを行いません。