Primitives

Alert dialog

Modal confirmation dialog for destructive or blocking decisions.

Composition

The preferred shape for composing the installed primitive from its exported parts.

Parts

Exported compound parts from the installed source.

AlertDialog
├── AlertDialogTrigger
├── AlertDialogClose
├── AlertDialogContent
├── AlertDialogHeader
├── AlertDialogFooter
├── AlertDialogTitle
└── AlertDialogDescription

First install and activate one skin. Core deliberately contains no visual token defaults.

The Control UI source installs this primitive from src/registry/sources/control-ui/ui/alert-dialog.tsx. Install it on its own with the command above, or inspect the source below.

Registry command

npx shadcn@latest add https://control-ui.dev/r/alert-dialog.json

See registry manifest

Knobs

Typed custom properties the recipe paints with. Set one on the root — style, a utility class, or a skin — and every slot inherits it.

--cui-popup-* · 16 knobsHow the cascade resolves

--cui-popup-radius*var(--radius-popover)

--cui-popup-background<color>var(--popover)

--cui-popup-foreground<color>var(--popover-foreground)

--cui-popup-border-color<color>var(--border)

--cui-popup-border-width<length>1px

--cui-popup-shadow*var(--shadow-pop)

--cui-popup-backdrop-filter*blur(var(--backdrop-blur-popover))

--cui-popup-backdrop-background<color>oklch(from var(--foreground) l c h / var(--overlay-opacity))

--cui-popup-item-radius<length-percentage>var(--radius-popup-item)

--cui-popup-item-foreground<color>var(--foreground)

--cui-popup-item-highlight-background<color>oklch(from var(--foreground) l c h / 0.06)

--cui-popup-item-highlight-foreground<color>var(--cui-popup-item-foreground)

--cui-popup-item-highlight-muted-foreground<color>var(--muted-foreground)

--cui-popup-item-disabled-opacity<number>0.4

--cui-popup-separator-color<color>var(--border)

--cui-popup-shortcut-foreground<color>var(--muted-foreground)

Installed dependencies

Support files installed with this primitive — shared ones arrive once with your first Control UI component. Public dependencies stay linked to their own pages.

Surface variantssrc/registry/sources/control-ui/surface-variants.tsSupport

Library dependencies

Public registry items keep their source on their own documentation page instead of duplicating it here.

ButtonbuttonPrimitive

Raw code

This primitive's source and the support files it installs with

src/registry/sources/control-ui/ui/alert-dialog.tsx

"use client";

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

import type { ComponentProps, CSSProperties, ReactNode } from "react";

import type { OpenChangeEventDetails } from "@/components/control-ui/control-props";

import type { PopupKnobStyle } from "@/components/control-ui/knob-contracts/popup-knobs";

import { cn } from "@/components/control-ui/lib/cn";

import { skinEffects, skinId } from "@/components/control-ui/skin";

import type { ButtonProps } from "@/components/control-ui/ui/button";

import { Button } from "@/components/control-ui/ui/button";

export type AlertDialogProps = {

children?: ReactNode;

open?: boolean;

defaultOpen?: boolean;

onOpenChange?: (open: boolean, eventDetails: OpenChangeEventDetails) => void;

};

export type AlertDialogContentProps = Omit<ComponentProps<"div">, "style"> & { style?: CSSProperties & PopupKnobStyle };

// No light dismiss — neither backdrop nor Esc closes it, so it needs explicit action.

export function AlertDialog(props: AlertDialogProps) {

return <AlertDialogPrimitive.Root {...props} />;

}

export function AlertDialogTrigger({

className,

...props

}: ComponentProps<typeof AlertDialogPrimitive.Trigger> & { style?: CSSProperties & PopupKnobStyle }) {

return (

<AlertDialogPrimitive.Trigger

data-control-ui="alert-dialog"

data-popup-kind="alert-dialog"

data-slot="trigger"

className={className}

{...props}

/>

);

}

type AlertDialogCloseProps = Omit<ComponentProps<typeof AlertDialogPrimitive.Close>, "render"> &

Pick<ButtonProps, "variant" | "size" | "tone" | "iconOnly">;

export function AlertDialogClose({

className,

children,

variant = "surface",

size = "sm",

tone = "neutral",

iconOnly,

...props

}: AlertDialogCloseProps) {

return (

<AlertDialogPrimitive.Close

{...props}

render={(renderProps) => (

<Button

{...renderProps}

data-popup-part="close"

variant={variant}

size={size}

tone={tone}

iconOnly={iconOnly}

className={cn(renderProps.className, className)}

>

{children}

</Button>

)}

/>

);

}

export function AlertDialogContent({ className, children, ...props }: AlertDialogContentProps) {

return (

<AlertDialogPrimitive.Portal>

{/* portal lands outside container-scoped skin root, so scope is re-asserted here */}

<AlertDialogPrimitive.Backdrop

data-control-ui="alert-dialog"

data-popup-kind="alert-dialog"

data-slot="backdrop"

data-control-family="popup"

data-popup-part="backdrop"

data-skin={skinId()}

data-effects={skinEffects()}

className="fixed inset-0 z-[70]"

/>

<AlertDialogPrimitive.Popup

data-skin={skinId()}

data-effects={skinEffects()}

data-control-ui="alert-dialog"

data-popup-kind="alert-dialog"

data-slot="content"

data-control-family="popup"

data-popup-part="surface"

data-surface="modal"

        className={cn("fixed left-1/2 top-[12vh] z-[71] grid w-[calc(100%-2rem)] max-w-md -translate-x-1/2 gap-4 p-0", className)}

{...props}

>

{children}

</AlertDialogPrimitive.Popup>

</AlertDialogPrimitive.Portal>

);

}

export function AlertDialogHeader({ className, ...props }: ComponentProps<"div"> & { style?: CSSProperties & PopupKnobStyle }) {

return (

<div

data-control-ui="alert-dialog"

data-control-family="popup"

data-popup-kind="alert-dialog"

data-slot="header"

className={cn("grid gap-1.5 p-4 pb-0", className)}

{...props}

/>

);

}

export function AlertDialogFooter({ className, ...props }: ComponentProps<"div"> & { style?: CSSProperties & PopupKnobStyle }) {

return (

<div

data-control-ui="alert-dialog"

data-control-family="popup"

data-popup-kind="alert-dialog"

data-slot="footer"

className={cn("flex flex-col-reverse gap-2 p-4 pt-0 sm:flex-row sm:justify-end", className)}

{...props}

/>

);

}

export function AlertDialogTitle({ className, ...props }: ComponentProps<"h2"> & { style?: CSSProperties & PopupKnobStyle }) {

return (

<AlertDialogPrimitive.Title

data-control-ui="alert-dialog"

data-control-family="popup"

data-popup-kind="alert-dialog"

data-slot="title"

className={className}

{...props}

/>

);

}

export function AlertDialogDescription({ className, ...props }: ComponentProps<"p"> & { style?: CSSProperties & PopupKnobStyle }) {

return (

<AlertDialogPrimitive.Description

data-control-ui="alert-dialog"

data-control-family="popup"

data-popup-kind="alert-dialog"

data-slot="description"

className={className}

{...props}

/>

);

}