AlertDialog

Blocking alert dialog with action + cancel buttons.

Usage

TSX

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@aeontel/ui";

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="destructive">Delete workspace</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Delete this workspace?</AlertDialogTitle>
      <AlertDialogDescription>
        This removes every agent, run, file, and event. Cannot be undone.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction onClick={handleDelete}>Delete</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>;

Exports

`AlertDialog`

Blocking alert dialog root.

TypeScript

AlertDialog(props: AlertDialogPrimitive.Root.Props): JSX.Element

`AlertDialogTrigger`

Element that opens the alert dialog.

TypeScript

AlertDialogTrigger(props: AlertDialogPrimitive.Trigger.Props): JSX.Element

`AlertDialogContent`

Alert dialog surface.

TypeScript

AlertDialogContent(props: AlertDialogPrimitive.Popup.Props & { size?: "default" | "sm"; }): JSX.Element

Props

Prop	Type	Default	Description
`size?`	`"default" \| "sm" \| undefined`	`"default"`

`AlertDialogHeader`

Alert dialog header.

TypeScript

AlertDialogHeader(props: React.ComponentProps<"div">): JSX.Element

`AlertDialogTitle`

Alert dialog title text.

TypeScript

AlertDialogTitle(props: React.ComponentProps<typeof AlertDialogPrimitive.Title>): JSX.Element

`AlertDialogDescription`

Alert dialog description text.

TypeScript

AlertDialogDescription(props: React.ComponentProps<typeof AlertDialogPrimitive.Description>): JSX.Element

`AlertDialogFooter`

Alert dialog footer with action + cancel buttons.

TypeScript

AlertDialogFooter(props: React.ComponentProps<"div">): JSX.Element

`AlertDialogAction`

Primary action button (e.g. Confirm).

TypeScript

AlertDialogAction(props: React.ComponentProps<typeof Button>): JSX.Element

Props

Prop	Type	Default	Description
`variant?`	`"link" \| "default" \| "secondary" \| "destructive" \| "outline" \| "ghost" \| null \| undefined`	—
`size?`	`"default" \| "sm" \| "lg" \| "xs" \| "icon" \| "icon-xs" \| "icon-sm" \| "icon-lg" \| null \| undefined`	—

`AlertDialogCancel`

Cancel button that dismisses the alert dialog.

TypeScript

AlertDialogCancel(props: AlertDialogPrimitive.Close.Props & Pick<React.ComponentProps<typeof Button>, "variant" | "size">): JSX.Element

Props

Prop	Type	Default	Description
`variant?`	`"link" \| "default" \| "secondary" \| "destructive" \| "outline" \| "ghost" \| null \| undefined`	`"outline"`
`size?`	`"default" \| "sm" \| "lg" \| "xs" \| "icon" \| "icon-xs" \| "icon-sm" \| "icon-lg" \| null \| undefined`	`"default"`