AlertDialog

確認ダイアログコンポーネント。削除などの重要な操作の確認に使用。

インポート

import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogAction, AlertDialogCancel } from '@caroainc/ui-components/client'

個別サブパス（バンドルサイズを抑えたい場合）:

import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogAction, AlertDialogCancel } from '@caroainc/ui-components/alert-dialog'

Composition

AlertDialog
├─ AlertDialogTrigger?
└─ AlertDialogContent
   ├─ AlertDialogHeader
   │  ├─ AlertDialogTitle
   │  └─ AlertDialogDescription?
   └─ AlertDialogFooter
      ├─ AlertDialogCancel
      └─ AlertDialogAction

確認内容を表すAlertDialogTitleと、退避・実行のためのAlertDialogCancel／AlertDialogActionを必ず用意します。各操作をAlertDialogContent外へ出さず、AlertDialogTriggerだけは制御されたopenを使う場合に省略できます。

基本的な使い方

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="destructive">削除</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>本当に削除しますか？</AlertDialogTitle>
      <AlertDialogDescription>
        この操作は取り消せません。データは完全に削除されます。
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>キャンセル</AlertDialogCancel>
      <AlertDialogAction>削除する</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

ログアウト確認

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="outline">ログアウト</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>ログアウトしますか？</AlertDialogTitle>
      <AlertDialogDescription>
        ログアウトすると、再度ログインが必要になります。
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>キャンセル</AlertDialogCancel>
      <AlertDialogAction>ログアウト</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

1行で呼ぶ確認（useConfirmDialog）

削除する・外すなどの前に挟む確認は、useConfirmDialogで呼べます。await confirm({...})は、実行ならtrue、キャンセル・閉じるならfalseで返ります。返り値のdialogは画面に1つだけ置きます。

結果がここに出ます

import { useConfirmDialog } from '@caroainc/ui-components/alert-dialog'

const { confirm, dialog } = useConfirmDialog()

const remove = async () => {
  const ok = await confirm({
    title: 'メンバーを外しますか？',
    description: '外した人は、このスペースの体験を編集できなくなります。',
    confirmLabel: '外す',
    variant: 'destructive', // 取り消せない操作は赤
  })
  if (ok) await removeMember()
}

return <>{/* ... */}{dialog}</>

オプション	型	説明
`title`	`ReactNode`	見出し（必須）
`description`	`ReactNode`	補足
`confirmLabel`	`string`	実行するボタンの文言（必須）
`cancelLabel`	`string`	やめるボタンの文言（既定: キャンセル）
`variant`	`'base' \| 'destructive'`	実行するボタンの色（既定: base）

Dialogとの違い

Dialog	AlertDialog
一般的なモーダル	確認・警告用
背景クリックで閉じる	背景クリックで閉じない
Escapeで閉じる	Escapeで閉じない
任意のコンテンツ	Cancel/Actionボタン必須

サイズ

size propで最大幅を調整できます（Dialogと同じ軸）。

<AlertDialogContent size="sm">...</AlertDialogContent>
<AlertDialogContent size="default">...</AlertDialogContent>  {/* デフォルト */}
<AlertDialogContent size="lg">...</AlertDialogContent>
<AlertDialogContent size="xl">...</AlertDialogContent>
<AlertDialogContent size="full">...</AlertDialogContent>

Props (AlertDialogContent)

Prop	Type	Default	Description
`size`	`'sm' \| 'default' \| 'lg' \| 'xl' \| 'full'`	`'default'`	ダイアログの最大幅
`className`	`string`	`-`	追加のCSSクラス

Props (AlertDialogAction)

Prop	Type	Default	Description
`onClick`	`() => void`	`-`	アクション実行時のコールバック
`className`	`string`	`-`	追加のCSSクラス

AlertDialog

On this page