Overlays Alert Dialog

Alert Dialog

Sure? For the things you can’t undo — it only closes with a choice.

Preview

Usage

tsx

import {
  AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle,
  AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, Button,
} from "zostel-ui";

<AlertDialog>
  <AlertDialogTrigger asChild><Button variant="destructive">Cancel stay</Button></AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Cancel your stay?</AlertDialogTitle>
      <AlertDialogDescription>Your beds go back to other travellers.</AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Keep it</AlertDialogCancel>
      <AlertDialogAction onClick={cancel}>Cancel stay</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Parts

Prop	Type	Default	Description
`AlertDialogAction`	`button`	—	The choice that does it (styled as a Button).
`AlertDialogCancel`	`button`	—	The way out (outline Button); focused first.
`open / onOpenChange`	`boolean / (open) => void`	—	On AlertDialog, for controlled use.

AlertDialogAction

Type: button

Default: —

The choice that does it (styled as a Button).

AlertDialogCancel

Type: button

Default: —

The way out (outline Button); focused first.

open / onOpenChange

Type: boolean / (open) => void

Default: —

On AlertDialog, for controlled use.