---
title: "Dialog"
description: "Modal or side drawer; open with Button(opens:id) or trigger:."
---

> Documentation Index
> Fetch the complete documentation index at: https://gistui.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Dialog

```gistui
root = Row(Button("Invite teammates", opens:dlg, icon:users), Button("Filters", opens:drawer, v:secondary))
dlg = Dialog("Invite teammates", Form("invite", TagInput("emails", "Email addresses", type:email, required), Buttons(Button("Cancel", v:ghost, close), Button("Send"), align:end)), subtitle:"They get an email with a link.")
drawer = Dialog("Filters", CheckboxGroup("status", "Status", ["Active", "Onboarding", "At risk"], v:chips), Buttons(Button("Done", close), align:end), v:drawer, side:right)
```

## Signature

This is the line a model reads in the system prompt.

```gistui
Dialog(title, ...children, subtitle:str, v:modal|drawer, side:right|left|bottom, size:sm|md|lg|xl, trigger:str, icon:Icon2)
```

- **Group:** Forms
- **Children:** Yes: any component or text
- **Positional arguments:** `title` (a trailing `?` means it may be left out)

## Props

| Prop | Type | How to write it | Notes |
|---|---|---|---|
| `title` | string | positional, required |  |
| `subtitle` | string | named: `subtitle:…` |  |
| `v` | `modal` · `drawer` | named: `v:…` | Default `"modal"`. |
| `side` | `right` · `left` · `bottom` | named: `side:…` | Default `"right"`. |
| `size` | `sm` · `md` · `lg` · `xl` | named: `size:…` | Default `"md"`. |
| `trigger` | string | named: `trigger:…` | label of its own open button |
| `icon` | name (open list) | named: `icon:…` | Also accepts `money`, `revenue`, `price`, `cost`, `payment`, `chart`, `analytics`, `trend`, `growth`, `decline`, `people`, `team`, `customers`, `person`, `company`, `office`, `location`, `place`, `travel`, `flight`, `food`, `restaurant`, `time`, `date`, `email`, `chat`, `security`, `idea`, `ai`, `launch`, `speed`, `energy`, `warning`, `error`, `success`, `video`, `movie`, `streaming`, `game`, `education`, `nature`, `health`, `legal`, `document`, `photo`, `shop`, `shopping`, `house`, `storage`, `api`, `winner`, `goal`, `sunny`, `clear`, `cloudy`, `partly-cloudy`, `rain`, `rainy`, `snow`, `storm`, `thunder`, `temperature`, `takeoff`, `departure`, `landing`, `arrival`, `baggage`, `seat`, `bag`. |

## Use your own component

Keep the name and schema, swap what is drawn. The prompt and the model's output do not change.

### React

```tsx
import { ui } from "@gistui/react/ui";

const lib = ui.extend({ Dialog: MyDialog });
<GistUI library={lib} stream={response.body} />;
```
### Vue

```vue
<GistUI :source="answer" :components="{ Dialog: MyDialog }" />
```
### Svelte

```svelte
<GistUI source={answer} components={{ Dialog: MyDialog }} />
```
### Solid

```tsx
<GistUI source={answer()} components={{ Dialog: MyDialog }} />
```
### Vanilla

```ts
import { ui } from "@gistui/vanilla/ui";

const lib = ui.extend({ Dialog: (ctx) => ({ el: myElement(ctx) }) });
```

See [Custom components](/docs/guides/custom-components/) for the full contract. Style hook: `[data-gistui="Dialog"]`.

Source: https://gistui.com/docs/components/forms/dialog/index.mdx