---
title: "Dialog"
description: "Modal dialog with trigger, header, body, footer slots."
section: "Libraries"
group: "UI components"
order: 510
---

## 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.

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

### `DialogTrigger`

Element that opens the dialog.

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

### `DialogContent`

Dialog surface (content + overlay).

```ts
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.

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

### `DialogTitle`

Dialog title text.

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

### `DialogDescription`

Dialog description text.

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

### `DialogBody`

Scrollable main body of the dialog.

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

### `DialogFooter`

Dialog footer section with action buttons.

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

**Props**

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

### `DialogClose`

Button that closes the dialog.

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