Modal
モーダルダイアログ。Modal.Header / Modal.Body / Modal.Footer のコンポジションで構成。
import { Modal } from "@blueai/ui"Examples
新規作成
削除確認
カスタムフッター
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| open* | boolean | — | 表示状態 |
| onClose* | () => void | — | 閉じるハンドラ |
| variant | "new" | "edit" | "delete" | "success" | — | モーダルのバリアント（アイコン・ボタン色が変わる） |
| size | "sm" | "md" | "lg" | "xl" | "md" | モーダルのサイズ |
| children | ReactNode | — | Modal.Header / Modal.Body / Modal.Footer を配置 |
ガイドライン
Do
- ●確認・編集など焦点を絞った操作に使う
- ●Escape キーで閉じられるようにする
Don't
- ●複雑なフォームをモーダルに詰め込まない
- ●入れ子モーダル（モーダルの上にモーダル）を使わない