Modal
作業を中断させる重さがある。確認や入力が本当に必要なときだけ使い、通知には Toast を使う。
デモ
import { Button, Modal, ModalBody, ModalFooter, ModalTitle } from '@novi-ui/raster'
<Modal isOpen={isOpen} onOpenChange={setIsOpen}>
<ModalTitle>削除しますか</ModalTitle>
<ModalBody>この操作は取り消せません。</ModalBody>
<ModalFooter>
<Button variant="outline" onPress={() => setIsOpen(false)}>キャンセル</Button>
<Button color="danger" onPress={() => setIsOpen(false)}>削除</Button>
</ModalFooter>
</Modal>
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
アクセシビリティ
- 開いている間フォーカスは内側に閉じ込められ、Escape で閉じる （`isKeyboardDismissDisabled` で無効化できる）。閉じるボタンには `aria-label` がある
- キーボードだけで操作できます。フォーカスリングはコントラスト比 3:1 以上です。
- 本文のコントラスト比は light / dark とも 4.5:1 以上を検査で保証しています。
prefers-reduced-motionが有効なときはアニメーションを行いません。