DialogFooter() — ui Function Reference

Architecture documentation for the DialogFooter() function in dialog.tsx from the ui codebase.

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ DialogFooter() — ui Function Reference

Dependency Diagram

graph TD
  63cad95e_fa0c_adb1_3d8a_77f958586362["DialogFooter()"]
  1f1fb707_fd40_064f_629b_90fb57bde5be["dialog.tsx"]
  63cad95e_fa0c_adb1_3d8a_77f958586362 -->|defined in| 1f1fb707_fd40_064f_629b_90fb57bde5be
  style 63cad95e_fa0c_adb1_3d8a_77f958586362 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/radix/ui/dialog.tsx lines 96–121

function DialogFooter({
  className,
  showCloseButton = false,
  children,
  ...props
}: React.ComponentProps<"div"> & {
  showCloseButton?: boolean
}) {
  return (
    <div
      data-slot="dialog-footer"
      className={cn(
        "cn-dialog-footer flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
        className
      )}
      {...props}
    >
      {children}
      {showCloseButton && (
        <DialogPrimitive.Close asChild>
          <Button variant="outline">Close</Button>
        </DialogPrimitive.Close>
      )}
    </div>
  )
}