AlertDialogDestructive() — ui Function Reference

Architecture documentation for the AlertDialogDestructive() function in alert-dialog-example.tsx from the ui codebase.

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ AlertDialogDestructive() — ui Function Reference

Dependency Diagram

graph TD
  615c3307_db3e_8e8d_577b_659fe15003c9["AlertDialogDestructive()"]
  f00e6683_5ad1_57ce_ba63_874d2425eaaf["alert-dialog-example.tsx"]
  615c3307_db3e_8e8d_577b_659fe15003c9 -->|defined in| f00e6683_5ad1_57ce_ba63_874d2425eaaf
  style 615c3307_db3e_8e8d_577b_659fe15003c9 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/base/examples/alert-dialog-example.tsx lines 157–190

function AlertDialogDestructive() {
  return (
    <Example title="Destructive" className="items-center">
      <AlertDialog>
        <AlertDialogTrigger
          render={<Button variant="destructive">Delete Chat</Button>}
        />
        <AlertDialogContent size="sm">
          <AlertDialogHeader>
            <AlertDialogMedia className="bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive">
              <IconPlaceholder
                lucide="Trash2Icon"
                tabler="IconTrash"
                hugeicons="Delete02Icon"
                phosphor="TrashIcon"
                remixicon="RiDeleteBinLine"
              />
            </AlertDialogMedia>
            <AlertDialogTitle>Delete chat?</AlertDialogTitle>
            <AlertDialogDescription>
              This will permanently delete this chat conversation. View{" "}
              <a href="#">Settings</a> delete any memories saved during this
              chat.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel variant="ghost">Cancel</AlertDialogCancel>
            <AlertDialogAction variant="destructive">Delete</AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </Example>
  )
}