---
title: Dialog
description: A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
---

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/button"
	"github.com/axadrn/shadcn-templ/v2/components/dialog"
	"github.com/axadrn/shadcn-templ/v2/components/field"
	"github.com/axadrn/shadcn-templ/v2/components/input"
	"github.com/axadrn/shadcn-templ/v2/components/label"
)

templ DialogDemo() {
	@dialog.Dialog() {
		<form>
			@button.Button(button.Props{
				Variant:    button.VariantOutline,
				Attributes: dialog.Trigger(ctx),
			}) {
				Open Dialog
			}
			@dialog.Content(dialog.ContentProps{Class: "sm:max-w-sm"}) {
				@dialog.Header() {
					@dialog.Title() {
						Edit profile
					}
					@dialog.Description() {
						Make changes to your profile here. Click save when you're done.
					}
				}
				@field.Group() {
					@field.Field() {
						@label.Label(label.Props{For: "name-1"}) {
							Name
						}
						@input.Input(input.Props{ID: "name-1", Name: "name", Value: "Axel Adrian"})
					}
					@field.Field() {
						@label.Label(label.Props{For: "username-1"}) {
							Username
						}
						@input.Input(input.Props{ID: "username-1", Name: "username", Value: "@axadrn"})
					}
				}
				@dialog.Footer() {
					@button.Button(button.Props{
						Variant:    button.VariantOutline,
						Attributes: dialog.Close(ctx),
					}) {
						Cancel
					}
					@button.Button(button.Props{Type: button.TypeSubmit}) {
						Save changes
					}
				}
			}
		</form>
	}
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
shadcn-templ add dialog
```

</TabsContent>

<TabsContent value="manual">

<Steps className="mb-0 pt-2">

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="dialog" title="components/dialog/dialog.templ" />

<ComponentSource name="dialog" title="components/dialog/dialog.js" />

Component scripts are loaded through the shared script bundle, see [JavaScript](/docs/installation#javascript).

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```go showLineNumbers
import "github.com/axadrn/shadcn-templ/v2/components/dialog"
```

```templ showLineNumbers
@dialog.Dialog() {
	@button.Button(button.Props{Attributes: dialog.Trigger(ctx)}) {
		Open
	}
	@dialog.Content() {
		@dialog.Header() {
			@dialog.Title() {
				Are you absolutely sure?
			}
			@dialog.Description() {
				This action cannot be undone.
			}
		}
	}
}
```

## Composition

Use the following composition to build a `Dialog`:

```text
dialog.Dialog
├── dialog.Trigger
└── dialog.Content
    ├── dialog.Header
    │   ├── dialog.Title
    │   └── dialog.Description
    └── dialog.Footer
        └── dialog.Close
```

## Custom Close Button

Replace the default close control with your own button.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/button"
	"github.com/axadrn/shadcn-templ/v2/components/dialog"
	"github.com/axadrn/shadcn-templ/v2/components/input"
	"github.com/axadrn/shadcn-templ/v2/components/label"
)

templ DialogCloseButton() {
	@dialog.Dialog() {
		@button.Button(button.Props{
			Variant:    button.VariantOutline,
			Attributes: dialog.Trigger(ctx),
		}) {
			Share
		}
		@dialog.Content(dialog.ContentProps{Class: "sm:max-w-md"}) {
			@dialog.Header() {
				@dialog.Title() {
					Share link
				}
				@dialog.Description() {
					Anyone who has this link will be able to view this.
				}
			}
			<div class="flex items-center gap-2">
				<div class="grid flex-1 gap-2">
					@label.Label(label.Props{For: "link", Class: "sr-only"}) {
						Link
					}
					@input.Input(input.Props{
						ID:         "link",
						Value:      "https://shadcn-templ.com/docs/installation",
						Attributes: templ.Attributes{"readonly": true},
					})
				</div>
			</div>
			@dialog.Footer(dialog.FooterProps{Class: "sm:justify-start"}) {
				@button.Button(button.Props{
					Type:       button.TypeButton,
					Attributes: dialog.Close(ctx),
				}) {
					Close
				}
			}
		}
	}
}
```

## No Close Button

Use `HideCloseButton` to hide the close button.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/button"
	"github.com/axadrn/shadcn-templ/v2/components/dialog"
)

templ DialogNoCloseButton() {
	@dialog.Dialog() {
		@button.Button(button.Props{
			Variant:    button.VariantOutline,
			Attributes: dialog.Trigger(ctx),
		}) {
			No Close Button
		}
		@dialog.Content(dialog.ContentProps{HideCloseButton: true}) {
			@dialog.Header() {
				@dialog.Title() {
					No Close Button
				}
				@dialog.Description() {
					This dialog doesn't have a close button in the top-right corner.
				}
			}
		}
	}
}
```

## Sticky Footer

Keep actions visible while the content scrolls.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/button"
	"github.com/axadrn/shadcn-templ/v2/components/dialog"
)

templ DialogStickyFooter() {
	@dialog.Dialog() {
		@button.Button(button.Props{
			Variant:    button.VariantOutline,
			Attributes: dialog.Trigger(ctx),
		}) {
			Sticky Footer
		}
		@dialog.Content() {
			@dialog.Header() {
				@dialog.Title() {
					Sticky Footer
				}
				@dialog.Description() {
					This dialog has a sticky footer that stays visible while the content scrolls.
				}
			}
			<div class="no-scrollbar -mx-4 max-h-[50vh] overflow-y-auto px-4">
				for range 10 {
					<p class="mb-4 leading-normal">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
					</p>
				}
			</div>
			@dialog.Footer() {
				@button.Button(button.Props{
					Variant:    button.VariantOutline,
					Attributes: dialog.Close(ctx),
				}) {
					Close
				}
			}
		}
	}
}
```

## Scrollable Content

Long content can scroll while the header stays in view.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/button"
	"github.com/axadrn/shadcn-templ/v2/components/dialog"
)

templ DialogScrollableContent() {
	@dialog.Dialog() {
		@button.Button(button.Props{
			Variant:    button.VariantOutline,
			Attributes: dialog.Trigger(ctx),
		}) {
			Scrollable Content
		}
		@dialog.Content() {
			@dialog.Header() {
				@dialog.Title() {
					Scrollable Content
				}
				@dialog.Description() {
					This is a dialog with scrollable content.
				}
			}
			<div class="no-scrollbar -mx-4 max-h-[50vh] overflow-y-auto px-4">
				for range 10 {
					<p class="mb-4 leading-normal">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
					</p>
				}
			</div>
		}
	}
}
```

## API Reference

### Dialog

The `Dialog` component is the root that links trigger, content and close via context.

| Prop               | Type     | Default |
| ------------------ | -------- | ------- |
| `Open`             | `bool`   | `false` |
| `DisableDismissible` | `bool`   | `false` |

### Trigger

`dialog.Trigger(ctx)` returns the attributes that turn any element into the trigger, usually spread onto a Button. Use `dialog.TriggerFor(id)` to target a dialog outside the current root.

| Prop  | Type              | Default |
| ----- | ----------------- | ------- |
| `ctx` | `context.Context` | -       |

### Content

The `dialog.Content` component is the dialog window.

| Prop              | Type     | Default |
| ----------------- | -------- | ------- |
| `HideCloseButton` | `bool`   | `false` |
| `DisableModal`    | `bool`   | `false` |
| `Class`           | `string` | -       |

### Header

The `dialog.Header` component holds the title and description.

| Prop    | Type     | Default |
| ------- | -------- | ------- |
| `Class` | `string` | -       |

### Title

The `dialog.Title` component is the accessible dialog title.

| Prop    | Type     | Default |
| ------- | -------- | ------- |
| `Class` | `string` | -       |

### Description

The `dialog.Description` component is the accessible dialog description.

| Prop    | Type     | Default |
| ------- | -------- | ------- |
| `Class` | `string` | -       |

### Footer

The `dialog.Footer` component holds the actions at the bottom of the dialog.

| Prop    | Type     | Default |
| ------- | -------- | ------- |
| `Class` | `string` | -       |

### Close

`dialog.Close(ctx)` returns the attributes that make any element close the dialog. Use `dialog.CloseFor(id)` to target a dialog outside the current root.

| Prop  | Type              | Default |
| ----- | ----------------- | ------- |
| `ctx` | `context.Context` | -       |