Dialog

Modal dialog with trigger, header, body, footer slots.

Usage

TSX

import {
  Dialog,
  DialogBody,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@aeontel/ui";

<Dialog open={open} onOpenChange={setOpen}>
  <DialogTrigger asChild>
    <Button>New agent</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>New agent</DialogTitle>
      <DialogDescription>Create an agent in this workspace.</DialogDescription>
    </DialogHeader>
    <DialogBody>Form fields.</DialogBody>
    <DialogFooter>
      <Button type="submit">Create</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>;

Exports

`Dialog`

Modal dialog root.

TypeScript

Dialog(props: DialogPrimitive.Root.Props): JSX.Element

`DialogTrigger`

Element that opens the dialog.

TypeScript

DialogTrigger(props: DialogPrimitive.Trigger.Props): JSX.Element

`DialogContent`

Dialog surface (content + overlay).

TypeScript

DialogContent(props: DialogPrimitive.Popup.Props & { showCloseButton?: boolean; expandable?: boolean; }): JSX.Element

Props

Prop	Type	Default	Description
`showCloseButton?`	`boolean \| undefined`	`true`
`expandable?`	`boolean \| undefined`	`false`

`DialogHeader`

Dialog header section.

TypeScript

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

`DialogTitle`

Dialog title text.

TypeScript

DialogTitle(props: DialogPrimitive.Title.Props): JSX.Element

`DialogDescription`

Dialog description text.

TypeScript

DialogDescription(props: DialogPrimitive.Description.Props): JSX.Element

`DialogBody`

Scrollable main body of the dialog.

TypeScript

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

`DialogFooter`

Dialog footer section with action buttons.

TypeScript

DialogFooter(props: React.ComponentProps<"div"> & { showCloseButton?: boolean; }): JSX.Element

Props

Prop	Type	Default	Description
`showCloseButton?`	`boolean \| undefined`	`false`

`DialogClose`

Button that closes the dialog.

TypeScript

DialogClose(props: DialogPrimitive.Close.Props): JSX.Element