Overlays & actionsExplore · Adapt · Compose

Alert Dialog

Modal confirmation pattern: explicit continue/cancel, optional media slot, compact size, destructive actions. Content uses Dialog presentation="slot" (custom overlay). Reveal the right amount of context without losing the user's place in the interface. Keep the trigger, content and dismissal behavior working as one interaction. Explore the live examples, inspect their source and choose the composition that fits your interface before connecting it to your application's data.

The examples use @/components/kamod-ui/alert-dialog in a Preact project. Follow the live result and its source together: compare supported options in the API reference, refine presentation with the component styles guide, and use shared theme tokens for consistent colors and surfaces. Preserve keyboard behavior and meaningful labels as you replace the sample content.

In this guide 7 sections

Interactive previewTry it before you copy it

Live Preact example Local preview theme · Responsive styles follow the preview width

Installation

Import alert dialog primitives from @/components/kamod-ui/alert-dialog. Motion is optional — core @kamod-ch/ui includes CSS enter/exit on AlertDialogContent.

pnpm add @kamod-ch/ui

The @/components/kamod-ui/… imports in these examples refer to local source files. Configure that alias when copying source, or use the corresponding exports from @kamod-ch/ui when installing the package. Connect the global theme CSS and Tailwind source detection before your first render.

import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogTitle, AlertDialogTrigger } from "@/components/kamod-ui/alert-dialog";

Usage

Compose Trigger (often asChild + Button), Content, Header (title + description), and Footer (Cancel + Action). Cancel and Action close the dialog on click.

import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@/components/kamod-ui/alert-dialog";

<AlertDialog>
  <AlertDialogTrigger>Delete account</AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Delete account?</AlertDialogTitle>
      <AlertDialogDescription>
        This action is permanent.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Continue</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="outline">Open</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Title</AlertDialogTitle>
      <AlertDialogDescription>Description</AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Continue</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Component examples & variants

Explore Alert Dialog in different contexts, from the starting pattern to the compositions below. Begin with Basic, then compare the examples that match your content, state and layout. These are working patterns to adapt, not a list of interchangeable variant values: check the API reference before using a prop or combining behaviors. Look at the surrounding labels, supporting text and spacing as well as the component itself.

Read the result and its implementation together. Use each showcase’s Code view to inspect imports and composition, or its Prompt view to prepare a setup or adaptation brief. Try the narrow preview and local theme controls before connecting real data, and use Reset to return an example to its initial state. Keep layout changes in class utilities where appropriate; follow the component styles guide for hierarchy and the theming guide for shared surfaces and colors. The accessibility notes explain what to preserve when making those changes.

Basic

Title, description, cancel and continue — matches the shadcn demo.

Interactive previewTry it before you copy it

Live Preact example Local preview theme · Responsive styles follow the preview width

Small

Use size="sm" on AlertDialogContent for a narrower panel.

Interactive previewTry it before you copy it

Live Preact example Local preview theme · Responsive styles follow the preview width

Media

AlertDialogMedia centers an icon or graphic above the title.

Interactive previewTry it before you copy it

Live Preact example Local preview theme · Responsive styles follow the preview width

Small with media

Combine size="sm" with AlertDialogMedia for compact hardware-style prompts.

Interactive previewTry it before you copy it

Live Preact example Local preview theme · Responsive styles follow the preview width

Destructive

Style media with destructive tokens; use variant="destructive" on AlertDialogAction and variant="outline" on Cancel.

Interactive previewTry it before you copy it

Live Preact example Local preview theme · Responsive styles follow the preview width

API reference

Props and data

Configure Alert Dialog using the contracts below. Read the documented options alongside the source definitions to understand which values your application supplies and which details the component owns. Start with a prop or helper, then follow its type link to inspect the declaration without leaving the page.

Props overview.

Type cards are extracted from this checkout’s TypeScript source at build time. Props inherited through HTMLAttributes, Omit or variant helpers remain references in those declarations; their fields are not flattened here. Match the reference to your installed version, and check a package’s exports before writing an import type. A type exported by a source file is not necessarily re-exported by @kamod-ch/ui.TypeScript

Component props

Read each option with its owning component. The marker identifies required fields verified in that declaration. A ? means a field can be omitted; it does not promise a fallback value. Existing documented defaults remain alongside the descriptions. For callbacks, check the argument and return types before connecting your own state or services.

AlertDialog

Same as Dialog with lockBodyScroll; use for blocking confirmations.

AlertDialog documented props
Prop / type	Description
`defaultOpen` booleanAlertDialogProps	Documented defaultOpen option for AlertDialog. Check its type alongside the usage examples before supplying a value. Documented default`false`
`open` booleanAlertDialogProps	Documented open option for AlertDialog. Check its type alongside the usage examples before supplying a value. Documented default`-`
`onOpenChange` (open: boolean) => voidAlertDialogProps	Documented onOpenChange option for AlertDialog. Check its type alongside the usage examples before supplying a value. Documented default`-`
`class` stringAlertDialogProps	Documented class option for AlertDialog. Check its type alongside the usage examples before supplying a value. Documented default`-`

AlertDialogTrigger

AlertDialogTrigger documented props
Prop / type	Description
`asChild` booleanAlertDialogTriggerProps	Documented asChild option for AlertDialogTrigger. Check its type alongside the usage examples before supplying a value. Documented default`false`
`class` stringAlertDialogTriggerProps	Documented class option for AlertDialogTrigger. Check its type alongside the usage examples before supplying a value. Documented default`-`

AlertDialogContent

AlertDialogContent documented props
Prop / type	Description
`size` "default" \| "sm"AlertDialogContentProps	`sm` — narrower panel (shadcn parity). Documented default`"default"`
`forceMount` booleanAlertDialogContentProps	Documented forceMount option for AlertDialogContent. Check its type alongside the usage examples before supplying a value. Documented default`false`
`class` stringAlertDialogContentProps	Documented class option for AlertDialogContent. Check its type alongside the usage examples before supplying a value. Documented default`-`

AlertDialogHeader

AlertDialogHeader documented props
Prop / type	Description
`class` stringAlertDialogHeaderProps	Documented class option for AlertDialogHeader. Check its type alongside the usage examples before supplying a value. Documented default`-`

AlertDialogMedia

Circular muted icon slot above title.

AlertDialogMedia documented props
Prop / type	Description
`class` stringAlertDialogMediaProps	Documented class option for AlertDialogMedia. Check its type alongside the usage examples before supplying a value. Documented default`-`

AlertDialogTitle

AlertDialogTitle documented props
Prop / type	Description
`class` stringAlertDialogTitleProps	Documented class option for AlertDialogTitle. Check its type alongside the usage examples before supplying a value. Documented default`-`

AlertDialogDescription

AlertDialogDescription documented props
Prop / type	Description
`class` stringAlertDialogDescriptionProps	Documented class option for AlertDialogDescription. Check its type alongside the usage examples before supplying a value. Documented default`-`

AlertDialogFooter

AlertDialogFooter documented props
Prop / type	Description
`class` stringAlertDialogFooterProps	Documented class option for AlertDialogFooter. Check its type alongside the usage examples before supplying a value. Documented default`-`

AlertDialogCancel

AlertDialogCancel documented props
Prop / type	Description
`variant` Button variantAlertDialogCancelProps	Documented variant option for AlertDialogCancel. Check its type alongside the usage examples before supplying a value. Documented default`"outline"`
`asChild` booleanAlertDialogCancelProps	Documented asChild option for AlertDialogCancel. Check its type alongside the usage examples before supplying a value. Documented default`false`
`class` stringAlertDialogCancelProps	Documented class option for AlertDialogCancel. Check its type alongside the usage examples before supplying a value. Documented default`-`

AlertDialogAction

AlertDialogAction documented props
Prop / type	Description
`variant` Button variantAlertDialogActionProps	Documented variant option for AlertDialogAction. Check its type alongside the usage examples before supplying a value. Documented default`"default"`
`asChild` booleanAlertDialogActionProps	Documented asChild option for AlertDialogAction. Check its type alongside the usage examples before supplying a value. Documented default`false`
`class` stringAlertDialogActionProps	Documented class option for AlertDialogAction. Check its type alongside the usage examples before supplying a value. Documented default`-`

Data type reference

Expand a card to inspect and copy the exact declaration. The code header identifies its repository file; follow imported or inherited types in the implementation source when you need the complete dependency chain. Required-field summaries cover fields declared directly in that type. Source-only helpers and inferred schema outputs describe the local implementation, not additional props you can pass to every component.

AlertDialog props

AlertDialogProps

Exported source declaration from AlertDialog.tsx. Referenced types retain their original names; inspect that file for imports and supporting definitions.

AlertDialogAction props

AlertDialogActionProps

Exported source declaration from AlertDialogAction.tsx. Referenced types retain their original names; inspect that file for imports and supporting definitions.

AlertDialogCancel props

AlertDialogCancelProps

Exported source declaration from AlertDialogCancel.tsx. Referenced types retain their original names; inspect that file for imports and supporting definitions.

AlertDialogContentSize

AlertDialogContentSize

Exported source declaration from AlertDialogContent.tsx. Referenced types retain their original names; inspect that file for imports and supporting definitions.

AlertDialogContent props

AlertDialogContentProps

Exported source declaration from AlertDialogContent.tsx. Referenced types retain their original names; inspect that file for imports and supporting definitions.

AlertDialogDescription props

AlertDialogDescriptionProps

Exported source declaration from AlertDialogDescription.tsx. Referenced types retain their original names; inspect that file for imports and supporting definitions.

AlertDialogFooter props

AlertDialogFooterProps

Exported source declaration from AlertDialogFooter.tsx. Referenced types retain their original names; inspect that file for imports and supporting definitions.

AlertDialogHeader props

AlertDialogHeaderProps

Exported source declaration from AlertDialogHeader.tsx. Referenced types retain their original names; inspect that file for imports and supporting definitions.

AlertDialogMedia props

AlertDialogMediaProps

Exported source declaration from AlertDialogMedia.tsx. Referenced types retain their original names; inspect that file for imports and supporting definitions.

AlertDialogTitle props

AlertDialogTitleProps

Exported source declaration from AlertDialogTitle.tsx. Referenced types retain their original names; inspect that file for imports and supporting definitions.

AlertDialogTrigger props

AlertDialogTriggerProps

Exported source declaration from AlertDialogTrigger.tsx. Referenced types retain their original names; inspect that file for imports and supporting definitions.

Accessibility

Build the complete interaction, including the parts outside Alert Dialog. The notes below distinguish the current implementation from the labels, content and behavior your application supplies. Start with the live preview, check the props and data reference, and test the finished composition with real content rather than assuming that an unchanged visual example covers every use case.

Built-in behavior and defaults

AlertDialog wraps Kamod Dialog and locks body scrolling. AlertDialogContent uses the slot presentation to supply its own overlay and panel. Its current inherited surface uses dialog semantics; the component name does not automatically change the role to alertdialog.

Labels and relationships

State the specific consequence in the title and explanation: identify what will be deleted or changed. Use explicit action text such as Delete workspace, and provide an equally understandable cancellation action.

Keyboard and focus

Verify initial focus deliberately for consequential actions; do not assume the Cancel button automatically receives it. Test the inherited Escape and outside-interaction behavior against the confirmation flow your application needs.

States and integration details

Do not use a destructive color as the only warning, and do not claim that this wrapper prevents every accidental dismissal. Handle pending, failed and completed actions without closing the dialog before an error can be understood.

Verify the complete interaction

Check behavior as well as markup. Work through these scenarios in the application where the component will be used. Automated checks can help find structural problems; also review the reading experience with a screen reader, keyboard focus and the actual feedback from your application.

Open with the keyboard and confirm the initial focus target is appropriate for the consequence.
Read the title, object name and both actions using a screen reader.
Test cancellation, Escape and a rejected request while keeping a safe way to recover.

Recheck the result after changing theme tokens, translations or class overrides. Include text enlargement, narrow layouts and reduced-motion settings where animation is present. Inspect the component source when a behavior differs from your expectation; a role or state attribute does not implement keyboard interaction by itself.

For background, read the WAI-ARIA authoring guidance and keyboard interface guidance. These explain the patterns; verify browser and assistive-technology behavior for the implementation and audience you actually support.

Build it into your interface

Use the Alert Dialog examples as a starting point, then review the behavior in the context of your own screen. Layout, state and content should work together.

Connect the behavior

Keep trigger and content within the component's documented composition. Give destructive actions a clear consequence and an explicit confirmation. Let the primitive manage focus and dismissal instead of adding a second document-level keyboard handler.

Copy the composition, then connect its intent. Replace sample records and callbacks with your own data flow. For options such as value, defaultValue, open or onChange, use only those documented in this component's API; different components expose different contracts.

Give each piece of state one owner. Keep a temporary selection inside the interface when nothing else needs it; lift shared values into a parent when other controls depend on them. Read the prop reference before combining controlled values with defaults. A default normally initializes a control; it is not a substitute for updating its current value.

Connect requests in an event handler or your application’s data layer, never as a side effect of rendering. Keep pending, completed and failed outcomes distinct, preserve useful input after an error, and offer a clear recovery action. If the integration subscribes to an external source, remove that subscription when its owner unmounts; cancel or ignore obsolete requests so an earlier response cannot replace newer results.

Start with the live preview, then exercise the same interaction with your actual data. The type definitions describe accepted values; they do not implement persistence, navigation or server-side validation for you. Keep those responsibilities in the application that composes the UI.

Refine the presentation

Let a parent own the surrounding spacing. Keep related elements together with gap and use semantic surface/foreground pairs so the composition follows the active theme. The wrapper below changes the surrounding layout without assuming extra props on Alert Dialog.

src/components/ExampleSurface.tsx

import type { ComponentChildren } from "preact";

export function ExampleSurface({ children }: { children: ComponentChildren }) {
  return (
    <div class="grid min-w-0 gap-4 rounded-lg border border-border bg-card p-4 text-card-foreground sm:p-6">
      {children}
    </div>
  );
}

Put the chosen example inside ExampleSurface, then refine supported variants and sizes using the API above. For application-wide changes, adjust theme tokens instead of repeating fixed colors. See Component styles for hierarchy, density and focus treatments.

Review the complete interaction

Open with the keyboard, move through the content and verify focus returns to a sensible trigger when closed.
Test Escape, outside interaction and nested overlays according to the component's documented behavior.
Check long titles and content on a small screen; the important action must remain reachable without clipping.

The preview's narrow control changes its container width. Also resize the browser when checking viewport-based Tailwind utilities such as sm: and md:, and test overlays in the full page where their portals render.

Compose a complete interface

Alert Dialog is one part of the interaction. Choose companion components for the information or actions that still need a place on the screen. The references below are suggestions to compose deliberately, not extra dependencies you must add to every example.

Keep one source of truth for the operation and let each component communicate a different part of it. For example, waiting, no results and failure need different explanations. Avoid showing contradictory states together, and keep recovery actions close to the message that explains them.

Start with the smallest composition that explains the task. Browse the component library for individual controls or the block collections for complete layouts. Reuse shared theme tokens so these pieces feel consistent in light and dark mode.

Sources & design references

Follow Alert Dialog from its implementation to the ideas behind your own composition. Start with the local API, explore a visual direction, then bring the result back to your app’s shared styles.

Implementation · Preact

Kamod UI implementation

Start with the code that powers this page. The Alert Dialog source in Kamod UI is the implementation reference. Use the installation guide for setup and the API reference for supported props, composition and events before adapting an example.

Source locationpackages/core/src/components/alert-dialog

Compare imports, default values and state handling with the example you chose. The repository’s main branch can be ahead of your installed version; check your package.json and lockfile when an API differs. Retain applicable license notices when reusing source.

Visual reference · Independently maintained

Explore the visual possibilities

Browse the Alert Dialog collection on Shadcnblocks to compare hierarchy, density and composition. Look at how labels, supporting text and surrounding space work together, then choose the details that help your own content read clearly.

Reference credit: Shadcnblocks. These independently maintained React examples are visual references; this link does not claim they authored Kamod’s Preact implementation. Check the original example’s license before reusing its code or assets, and use this page’s API when building the Kamod version.

Bring it back to your app

A reference becomes useful when it fits your real content. Work through these decisions in order:

Keep the behavior grounded. Start with the interactive examples, then connect your data and callbacks using the integration guidance. Preserve labels, keyboard access and disabled states as you change the presentation.
Make the styling repeatable. Use the styles guide for local class adjustments and theming documentation for shared color decisions. Keep semantic surface and foreground pairs together in both light and dark mode.
Check the complete screen. See how components combine in the block collections, then try long labels, loading states and narrow layouts in your own composition. The Theme Toggle guide helps you expose a scheme switch in the finished interface.