# Dashboard dialog 22

> Destructive delete confirmation dialog with alert triangle avatar, warning message, optional do not ask again checkbox, and cancel or delete actions.

A shadcn/ui block from the [@shadcn-studio](https://shadcnstudio.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcn-studio/dashboard-dialog-22).

- Page, with a live preview: https://shadcn.exchange/r/shadcn-studio/dashboard-dialog-22
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcn-studio/dashboard-dialog-22-light-da2f10aa584a9113.png
- Registry item: https://shadcnstudio.com/r/new-york-v4/dashboard-dialog-22.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnstudio.com/r/new-york-v4/dashboard-dialog-22.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `lucide-react`
- Registry items: `avatar`, `button`, `dialog`, `utils`, `checkbox`, `label`

## Files

### `src/registry/new-york/blocks/dashboard-and-application/dashboard-dialog/dashboard-dialog-22/page.tsx`

```tsx
import { Button } from '@/registry/new-york/ui/button'

import ErrorDialog from '@/registry/new-york/components/blocks/dashboard-dialog-22/dialog-error'

const DialogPage = () => {
  return (
    <div className='flex h-dvh items-start justify-center p-8'>
      <ErrorDialog
        defaultOpen
        trigger={
          <Button variant='outline'>
            <span>Delete</span>
          </Button>
        }
      />
    </div>
  )
}

export default DialogPage
```

### `src/registry/new-york/components/blocks/dashboard-dialog-22/dialog-error.tsx`

```tsx
'use client'

import { useState, type ReactNode } from 'react'

import { TriangleAlertIcon } from 'lucide-react'

import { Avatar, AvatarFallback } from '@/registry/new-york/ui/avatar'
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger
} from '@/registry/new-york/ui/dialog'
import { Button } from '@/registry/new-york/ui/button'
import { Checkbox } from '@/registry/new-york/ui/checkbox'
import { Label } from '@/registry/new-york/ui/label'

import { cn } from '@/registry/new-york/lib/utils'

type Props = {
  trigger: ReactNode
  defaultOpen?: boolean
  className?: string
}

const ErrorDialog = ({ defaultOpen = false, trigger, className }: Props) => {
  const [open, setOpen] = useState(defaultOpen)

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild onClick={() => setOpen(true)}>
        {trigger}
      </DialogTrigger>
      <DialogContent className={cn('sm:max-w-145 [&>[data-slot=dialog-close]>svg]:size-5', className)}>
        <DialogHeader className='items-center gap-4'>
          <Avatar className='border-destructive bg-destructive/10 dark:border-destructive/10 dark:bg-destructive/10 size-15 border p-2'>
            <AvatarFallback className='bg-transparent'>
              <div className='flex items-center justify-center'>
                <TriangleAlertIcon className='text-destructive dark:text-destructive size-7' />
              </div>
            </AvatarFallback>
          </Avatar>
          <div className='space-y-3.5 text-center'>
            <DialogTitle className='leading-7'>Are you absolutely sure you want to delete?</DialogTitle>
            <DialogDescription className='max-w-sm'>
              This action cannot be undone. This will permanently delete your account and remove your data from our
              servers.
              <span className='mt-4 flex items-center justify-center gap-3'>
                <Checkbox id='terms' />
                <Label htmlFor='terms'>Don&apos;t ask again</Label>
              </span>
            </DialogDescription>
          </div>
        </DialogHeader>

        <DialogFooter className='flex-row items-center justify-center! gap-4'>
          <DialogClose asChild>
            <Button size='lg' variant='outline'>
              Cancel
            </Button>
          </DialogClose>
          <DialogClose asChild>
            <Button size='lg' variant='destructive'>
              Delete
            </Button>
          </DialogClose>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}

export default ErrorDialog
```