AlertDialog

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

インポート

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

基本的な使い方

<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ボタン必須

Props (AlertDialogAction)

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

AlertDialog

インポート

基本的な使い方

ログアウト確認

Dialogとの違い

Props (AlertDialogAction)

On this page