Dialog

Dialog renders a native dialog root with optional behavior hook.

github.com/fastygo/templ/ui

Summary

Dialog renders a native dialog root with optional behavior hook.

Use Cases

Render modal content

Render sheet-like panels with native dialog semantics

Semantics

DataUI8Kit is opt-in and only renders when provided

Use AriaLabel or AriaLabelledBy for the accessible name

Example variant.default

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Dialog(ui.DialogProps{AriaLabel: "Dialog"}) {
		@ui.Text(ui.TextProps{}, "Dialog body.")
	}
}

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Dialog(ui.DialogProps{AriaLabel: "Dialog"}) {
		@ui.Text(ui.TextProps{}, "Dialog body.")
	}
}

Example variant.sheet

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Dialog(ui.DialogProps{Variant: "sheet", Size: "full", AriaLabel: "Panel"}) {
		@ui.Text(ui.TextProps{}, "Panel body.")
	}
}

import "github.com/fastygo/templ/ui"

templ Example() {
	@ui.Dialog(ui.DialogProps{Variant: "sheet", Size: "full", AriaLabel: "Panel"}) {
		@ui.Text(ui.TextProps{}, "Panel body.")
	}
}

API

DataUI8Kit · string — role: behavior-hook

Open · bool — role: state

Size · string — role: density; enum: sm|default|lg|xl|full; default: default

Variant · string — role: appearance; enum: default|card|sheet|unstyled; default: default; source: ui.dialog.DialogVariants