Dialog

Dialog overlay that requires user attention or interaction.

Source Tailwind CSS JavaScript

Default

package showcase

import (
	"github.com/templui/templui/components/button"
	"github.com/templui/templui/components/dialog"
	"github.com/templui/templui/components/form"
	"github.com/templui/templui/components/input"
)

templ DialogDefault() {
	@dialog.Dialog() {
		@dialog.Trigger() {
			@button.Button(button.Props{
				Variant: button.VariantOutline,
			}) {
				Open Dialog
			}
		}
		@dialog.Content(dialog.ContentProps{
			Class: "max-w-md",
		}) {
			@dialog.Header() {
				@dialog.Title() {
					Edit Profile
				}
				@dialog.Description() {
					Make changes to your profile here. Click save when you're done.
				}
			}
			<div class="space-y-4">
				<div class="space-y-2">
					@form.Label(form.LabelProps{For: "name"}) {
						Name
					}
					@input.Input(input.Props{
						ID:          "name",
						Placeholder: "Enter your name",
						Value:       "John Doe",
					})
				</div>
				<div class="space-y-2">
					@form.Label(form.LabelProps{For: "username"}) {
						Username
					}
					@input.Input(input.Props{
						ID:          "username",
						Placeholder: "Enter your username",
						Value:       "@johndoe",
					})
				</div>
			</div>
			@dialog.Footer() {
				@dialog.Close() {
					@button.Button(button.Props{
						Variant: button.VariantOutline,
					}) {
						Cancel
					}
				}
				@button.Button() {
					Save changes
				}
			}
		}
	}
}

Installation

templui add dialog

Load the script once in your layout:

<head>
  @dialog.Script()
</head>

Examples

External Trigger

package showcase

import (
	"github.com/templui/templui/components/button"
	"github.com/templui/templui/components/dialog"
)

templ DialogExternalTrigger() {
	<div class="space-y-4">
		// External trigger button
		@dialog.Trigger(dialog.TriggerProps{
			For: "external-dialog",
		}) {
			@button.Button(button.Props{
				Variant: button.VariantOutline,
			}) {
				Open External Dialog
			}
		}
		// Dialog defined separately
		@dialog.Dialog(dialog.Props{
			ID: "external-dialog",
		}) {
			@dialog.Content(dialog.ContentProps{
				Class: "max-w-md",
			}) {
				@dialog.Header() {
					@dialog.Title() {
						External Dialog
					}
					@dialog.Description() {
						This dialog can be triggered from anywhere on the page.
					}
				}
				@dialog.Footer() {
					@dialog.Close() {
						@button.Button() {
							Close
						}
					}
				}
			}
		}
	</div>
}

Non-modal

package showcase

import (
	"github.com/templui/templui/components/button"
	"github.com/templui/templui/components/dialog"
)

templ DialogNoModal() {
	<div class="space-y-4">
		@dialog.Trigger(dialog.TriggerProps{
			For: "non-modal-dialog",
		}) {
			@button.Button(button.Props{
				Variant: button.VariantOutline,
			}) {
				Open Non-modal Dialog
			}
		}
		@dialog.Dialog(dialog.Props{
			ID: "non-modal-dialog",
		}) {
			@dialog.Content(dialog.ContentProps{
				Class:        "max-w-md",
				DisableModal: true,
			}) {
				@dialog.Header() {
					@dialog.Title() {
						Non-Modal Mode
					}
					@dialog.Description() {
						This dialog does not use a backdrop.
					}
				}
				@dialog.Footer() {
					@dialog.Close() {
						@button.Button() {
							Close
						}
					}
				}
			}
		}
	</div>
}

API Reference

Required parameter

Hover for description

Dialog

Main dialog wrapper component. Provides context for child components.

Name	Type	Default
`ID` Optional HTML id for the dialog root. Useful for external targeting.	`string`	`""`
`Class` Additional CSS classes to apply to the dialog container	`string`	`""`
`Attributes` Additional HTML attributes to apply to the dialog container	`templ.Attributes`	`nil`
`DisableClickAway` Whether to disable closing the dialog by clicking outside	`bool`	`false`
`DisableESC` Whether to disable closing the dialog with the ESC key	`bool`	`false`
`Open` Whether the dialog should be open initially	`bool`	`false`

Trigger

Element that triggers the dialog to open. Usually used inside Dialog, or externally by targeting a dialog root ID with For.

Name	Type	Default
`ID` Unique identifier for the trigger element	`string`	`""`
`Class` Additional CSS classes to apply to the trigger	`string`	`""`
`Attributes` Additional HTML attributes to apply to the trigger	`templ.Attributes`	`nil`
`For` Optional dialog root id for external triggers	`string`	`""`

Content

Native dialog content rendered inside Dialog.

Name	Type	Default
`Class` Additional CSS classes to apply to the content	`string`	`""`
`Attributes` Additional HTML attributes to apply to the content	`templ.Attributes`	`nil`
`HideCloseButton` Whether to hide the default close button	`bool`	`false`
`DisableModal` Whether to disable modal mode (removes the backdrop)	`bool`	`false`

Header

Header section of the dialog.

Name	Type	Default
`ID` Unique identifier for the header element	`string`	`""`
`Class` Additional CSS classes to apply to the header	`string`	`""`
`Attributes` Additional HTML attributes to apply to the header	`templ.Attributes`	`nil`

Title

Dialog title component. Should be used inside Header.

Name	Type	Default
`ID` Unique identifier for the title element	`string`	`""`
`Class` Additional CSS classes to apply to the title	`string`	`""`
`Attributes` Additional HTML attributes to apply to the title	`templ.Attributes`	`nil`

Description

Dialog description component. Should be used inside Header.

Name	Type	Default
`ID` Unique identifier for the description element	`string`	`""`
`Class` Additional CSS classes to apply to the description	`string`	`""`
`Attributes` Additional HTML attributes to apply to the description	`templ.Attributes`	`nil`

Body

Body/content section of the dialog.

Name	Type	Default
`ID` Unique identifier for the body element	`string`	`""`
`Class` Additional CSS classes to apply to the body	`string`	`""`
`Attributes` Additional HTML attributes to apply to the body	`templ.Attributes`	`nil`

Footer

Footer section of the dialog.

Name	Type	Default
`ID` Unique identifier for the footer element	`string`	`""`
`Class` Additional CSS classes to apply to the footer	`string`	`""`
`Attributes` Additional HTML attributes to apply to the footer	`templ.Attributes`	`nil`

Close

Element that closes the dialog.

Name	Type	Default
`ID` Unique identifier for the close element	`string`	`""`
`Class` Additional CSS classes to apply to the close element	`string`	`""`
`Attributes` Additional HTML attributes to apply to the close element	`templ.Attributes`	`nil`
`For` Optional dialog root id to close (defaults to closest dialog if empty)	`string`	`""`

JavaScript API

// Open a dialog programmatically
window.tui.dialog.open("dialog-root-id");

// Close a dialog
window.tui.dialog.close("dialog-root-id");

// Toggle dialog state
window.tui.dialog.toggle("dialog-root-id");

// Check if dialog is open (returns true/false)
const isOpen = window.tui.dialog.isOpen("dialog-root-id");

Menu

Getting Started

Components

Dialog

Edit Profile

Installation

Examples

External Dialog

API Reference

Dialog

Trigger

Content

Header

Title

Description

Body

Footer

Close

JavaScript API