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>

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