BlueAI InlineConfirm
インラインで確認アクションを表示するバナーコンポーネント。variant に応じたアイコンとカラーで警告・確認を提示。
|
import { InlineConfirm } from "@blueai/ui"Examples
Danger
この請求書を削除しますか？
削除すると元に戻せません。
<InlineConfirm
variant="danger"
title="この請求書を削除しますか？"
description="削除すると元に戻せません。"
confirmLabel="削除する"
onConfirm={() => alert("削除しました")}
onCancel={() => {}}
/>Warning
この取引先をアーカイブしますか？
<InlineConfirm
variant="warning"
title="この取引先をアーカイブしますか？"
confirmLabel="アーカイブする"
onConfirm={() => alert("アーカイブしました")}
onCancel={() => {}}
/>Info
新しいバージョンが利用可能です
最新版にアップデートしてください。
<InlineConfirm
variant="info"
title="新しいバージョンが利用可能です"
description="最新版にアップデートしてください。"
confirmLabel="アップデート"
onConfirm={() => alert("アップデート開始")}
/>Success
送信が完了しました
<InlineConfirm
variant="success"
title="送信が完了しました"
confirmLabel="OK"
onConfirm={() => {}}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant* | "danger" | "warning" | "info" | "success" | — | スタイルバリアント |
| title* | string | — | タイトルテキスト |
| confirmLabel* | string | — | 確認ボタンのラベル |
| onConfirm* | () => void | — | 確認ボタンクリック時のハンドラ |
| description | string | — | 補足説明テキスト |
| cancelLabel | string | "キャンセル" | キャンセルボタンのラベル |
| onCancel | () => void | — | キャンセルボタンクリック時のハンドラ（指定時のみ表示） |
| icon | ReactNode | — | カスタムアイコン（省略時は variant に応じたデフォルト） |