BlueAI Modal
モーダルダイアログ。Modal.Header / Modal.Body / Modal.Footer のコンポジションで構成。
|
import { Modal } from "@blueai/ui"Examples
新規作成
const [open, setOpen] = useState(false);
<FormButton variant="primary" size="sm" onClick={() => setOpen(true)}>
新規作成モーダルを開く
</FormButton>
<Modal open={open} onClose={() => setOpen(false)} variant="new">
<Modal.Header>新しい取引先を追加</Modal.Header>
<Modal.Body>
<FormInput label="会社名" value={name} onChange={setName} />
</Modal.Body>
<Modal.Footer submitLabel="追加する" onSubmit={handleSubmit} />
</Modal>削除確認
<Modal open={open} onClose={() => setOpen(false)} variant="delete">
<Modal.Header description="この操作は元に戻せません">
請求書を削除しますか？
</Modal.Header>
<Modal.Body>
<p>INV-2025-0039（下書き）を完全に削除します。</p>
</Modal.Body>
<Modal.Footer submitLabel="削除する" onSubmit={handleDelete} />
</Modal>カスタムフッター
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
- ●複雑なフォームをモーダルに詰め込まない
- ●入れ子モーダル（モーダルの上にモーダル）を使わない