Ship faster with goilerplate • Get it now for $99 instead of $199

Dialog

Dialog overlay that requires user attention or interaction.

Source Tailwind CSS JavaScript

Default

Edit Profile

Make changes to your profile here. Click save when you're done.

Installation

templui add dialog

Load the script once in your layout:

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

Examples

External Trigger

External Dialog

This dialog can be triggered from anywhere on the page.

Non-modal

Non-Modal Mode

This dialog does not use a backdrop.

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

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");