Alert Dialog

An alert dialog is a modal surface that appears above the main interface to capture the user’s attention

Basic Usage

Here is example of an alert dialog.

import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, Button } from "@epilot/volt-ui"

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button destructive>Delete Account</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
      <AlertDialogDescription>
        This action cannot be undone. This will permanently delete your
        account and remove your data from our servers.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction variant="primary">Confirm</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

API Reference

AlertDialog

Root that controls open state.

Prop	Type	Default	Description
`open`	boolean	-	Controlled open state.
`defaultOpen`	boolean	-	Uncontrolled initial open state.
`onOpenChange`	`(open: boolean) => void`	-	Called when the open state changes.

AlertDialogTrigger

Element that opens the dialog.

Prop	Type	Default	Description
`asChild`	boolean	`false`	Render the trigger as its child (e.g., custom button).

AlertDialogPortal

Renders content in a portal.

Prop	Type	Default	Description
`forceMount`	boolean	`false`	Keep content mounted when closed.
`container`	`HTMLElement \| null`	`null`	DOM node to render the portal into.

AlertDialogOverlay

Backdrop overlay behind the dialog.

Prop	Type	Default	Description
`className`	string	-	Additional classes for the overlay.

AlertDialogContent

Dialog surface.

Prop	Type	Default	Description
`className`	string	-	Additional classes for the content.

AlertDialogHeader

Wrapper for title/description.

Prop	Type	Default	Description
`className`	string	-	Additional classes for the header.

AlertDialogTitle

Required heading.

Prop	Type	Default	Description
`className`	string	-	Additional classes for the title.

AlertDialogDescription

Supporting text.

Prop	Type	Default	Description
`className`	string	-	Additional classes for the description.

AlertDialogFooter

Container for actions.

Prop	Type	Default	Description
`className`	string	-	Additional classes for the footer.

AlertDialogAction

Primary/confirm action.

Prop	Type	Default	Description
`variant`	`"primary"` \| `"secondary"` \| `"tertiary"`	`"primary"`	Button style for the confirm action.
`destructive`	`boolean`	`false`	Destructive styling
`size`	Same as Button component	Button size for the confirm action.
`className`	string	-	Additional classes for the button.

AlertDialogCancel

Secondary/cancel action.

Prop	Type	Default	Description
`variant`	`"primary" \| "secondary" \| "tertiary" \| "destructive"`	`"secondary"`	Button style for the cancel action.
`size`	Same as Button component	Button size for the cancel action.
`className`	string	-	Additional classes for the button.

Alert Dialog

On this page