Alert Dialog

Requests confirmation before a consequential action.

Installation

Install Alert Dialog from Oros with shadcn CLI 4.13.0.

pnpm dlx shadcn@4.13.0 add @oros/alert-dialog

Usage

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
} from "@/components/ui/alert-dialog"

Open the Source tab in the preview for a complete working example.

Anatomy

Export	Responsibility
AlertDialog	The root component that owns the primary structure and state.
AlertDialogAction	Provides an action associated with the component.
AlertDialogCancel	A composable part of the component anatomy.
AlertDialogContent	Contains the primary visible content.
AlertDialogDescription	Provides supporting context for the current region.
AlertDialogFooter	Groups supporting actions or metadata.
AlertDialogHeader	Groups heading and introductory content.
AlertDialogMedia	A composable part of the component anatomy.
AlertDialogOverlay	Covers background content while an overlay is active.
AlertDialogPortal	Moves overlay content to a stable document layer.
AlertDialogTitle	Provides the visible heading for the current region.
AlertDialogTrigger	Controls opening, selection, or disclosure behavior.

API Reference

Alert Dialog exports 12 named entries. Component exports accept the props of their underlying HTML element or Base UI component, plus an optional className, unless the source defines a more focused type.

AlertDialog Component
AlertDialogAction Component
AlertDialogCancel Component
AlertDialogContent Component
AlertDialogDescription Component
AlertDialogFooter Component
AlertDialogHeader Component
AlertDialogMedia Component
AlertDialogOverlay Component
AlertDialogPortal Component
AlertDialogTitle Component
AlertDialogTrigger Component

Accessibility

Alert Dialog inherits focus management and keyboard support from Base UI; keep the provided trigger and content parts together.
Give icon-only triggers an accessible name, retain visible focus styles, and verify Escape and focus-return behavior in the final composition.

Source

Alert Dialog uses the standard shadcn API and is distributed through Oros. Installing it adds the component source and required dependencies to your app. The Source tab above shows a complete usage example.

Alert Aspect Ratio