Home / File/ alert-dialog.tsx — ui Source File

alert-dialog.tsx — ui Source File

Architecture documentation for alert-dialog.tsx, a tsx file in the ui codebase. 4 imports, 0 dependents.

File tsx ComponentRegistry UIPrimitives 4 imports 12 functions

Entity Profile

Dependency Diagram

graph LR
  639898ee_f932_0434_45a5_dde95c7f055f["alert-dialog.tsx"]
  1d141819_425e_b5fd_4c8e_32f7c6a42cf2["react"]
  639898ee_f932_0434_45a5_dde95c7f055f --> 1d141819_425e_b5fd_4c8e_32f7c6a42cf2
  4a310ddc_06ca_398c_dc2a_43bf245f4325["alert-dialog"]
  639898ee_f932_0434_45a5_dde95c7f055f --> 4a310ddc_06ca_398c_dc2a_43bf245f4325
  8ad666ec_1b20_adda_0392_87a60bdb3a68["utils"]
  639898ee_f932_0434_45a5_dde95c7f055f --> 8ad666ec_1b20_adda_0392_87a60bdb3a68
  7328fa0a_98b6_fe77_42fd_0d1582b24604["button"]
  639898ee_f932_0434_45a5_dde95c7f055f --> 7328fa0a_98b6_fe77_42fd_0d1582b24604
  style 639898ee_f932_0434_45a5_dde95c7f055f fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

"use client"

import * as React from "react"
import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog"

import { cn } from "@/registry/bases/base/lib/utils"
import { Button } from "@/registry/bases/base/ui/button"

function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
}

function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {
  return (
    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
  )
}

function AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {
  return (
    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
  )
}

function AlertDialogOverlay({
  className,
  ...props
}: AlertDialogPrimitive.Backdrop.Props) {
  return (
    <AlertDialogPrimitive.Backdrop
      data-slot="alert-dialog-overlay"
      className={cn(
        "cn-alert-dialog-overlay fixed inset-0 isolate z-50",
        className
      )}
      {...props}
    />
  )
}

function AlertDialogContent({
  className,
  size = "default",
  ...props
}: AlertDialogPrimitive.Popup.Props & {
  size?: "default" | "sm"
}) {
  return (
    <AlertDialogPortal>
      <AlertDialogOverlay />
      <AlertDialogPrimitive.Popup
        data-slot="alert-dialog-content"
        data-size={size}
        className={cn(
          "cn-alert-dialog-content group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 outline-none",
          className
        )}
        {...props}
      />
    </AlertDialogPortal>
// ... (116 more lines)

Subdomains

Dependencies

  • alert-dialog
  • button
  • react
  • utils

Frequently Asked Questions

What does alert-dialog.tsx do?
alert-dialog.tsx is a source file in the ui codebase, written in tsx. It belongs to the ComponentRegistry domain, UIPrimitives subdomain.
What functions are defined in alert-dialog.tsx?
alert-dialog.tsx defines 12 function(s): AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, and 2 more.
What does alert-dialog.tsx depend on?
alert-dialog.tsx imports 4 module(s): alert-dialog, button, react, utils.
Where is alert-dialog.tsx in the architecture?
alert-dialog.tsx is located at apps/v4/registry/bases/base/ui/alert-dialog.tsx (domain: ComponentRegistry, subdomain: UIPrimitives, directory: apps/v4/registry/bases/base/ui).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free