GothUI

Overlays

Dialog

A native modal with a labeled title and close form.

components.Dialog · DialogProps

If native invoker commands are unavailable, use the ordinary-page example.

A focused moment

The browser manages modal focus and dismissal.

Press Escape or use Close. Nothing is saved or changed.

Use it well.

Provide a unique ID and a native opener. Place outside other forms because it contains a method=dialog form. Keep an ordinary-page fallback for unsupported commands.

Explore the full demo →

This is the source compiled for the preview. Select the text to copy it, or download the file. Change the package name and demo routes for your application.

package examples

import "github.com/Tend-Stack/GothUI/v2026/components"

templ ExampleDialog() {
	@components.Button(components.ButtonProps{Text: "Open the sample dialog", CommandFor: "sample-dialog", Command: components.DialogShowModal})
	<p><small>If native invoker commands are unavailable, use the <a href="/interactions?view=confirm">ordinary-page example</a>.</small></p>
	@components.Dialog(components.DialogProps{ID: "sample-dialog", Title: "A focused moment", Description: "The browser manages modal focus and dismissal."}) {
		<p>Press Escape or use Close. Nothing is saved or changed.</p>
	}
}