Caroa UI

AlertDialog

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

インポート

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

基本的な使い方

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

ログアウト確認

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

Dialogとの違い

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

Props (AlertDialogAction)

PropTypeDefaultDescription
onClick() => void-アクション実行時のコールバック
classNamestring-追加のCSSクラス

On this page