AlertDialog

overlays

A modal dialog that interrupts the user with important content and expects a response.

Preview

Installation

npm install @launchapp/design-system

Import

import {  AlertDialogRoot, AlertDialogTrigger, AlertDialogContent,  AlertDialogHeader, AlertDialogFooter, AlertDialogTitle,  AlertDialogDescription, AlertDialogAction, AlertDialogCancel} from "@launchapp/design-system";

Examples

Basic AlertDialog

<AlertDialogRoot>  <AlertDialogTrigger asChild>    <Button variant="destructive">Delete account</Button>  </AlertDialogTrigger>  <AlertDialogContent>    <AlertDialogHeader>      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>      <AlertDialogDescription>        This action cannot be undone.      </AlertDialogDescription>    </AlertDialogHeader>    <AlertDialogFooter>      <AlertDialogCancel>Cancel</AlertDialogCancel>      <AlertDialogAction>Continue</AlertDialogAction>    </AlertDialogFooter>  </AlertDialogContent></AlertDialogRoot>

Props

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state.
`onOpenChange`	`(open: boolean) => void`	—	Callback when open state changes.
`defaultOpen`	`boolean`	`false`	Initial open state when uncontrolled.

← PreviousAlert

Next →AspectRatio