Alert Dialog
Modal that interrupts flow.
github.com/fastygo/templ/ui
Modal that interrupts flow.
Default
Are you sure?
This action cannot be undone.
import "github.com/fastygo/templ/ui"
templ Example() {
@ui.Box(ui.BoxProps{Class: "max-w-sm rounded-lg border border-border bg-card p-4"}) {
@ui.Title(ui.TitleProps{Order: 3, Class: "text-base font-semibold"}, "Are you sure?")
@ui.Text(ui.TextProps{Class: "text-sm text-muted-foreground"}, "This action cannot be undone.")
@ui.Group(ui.GroupProps{Class: "mt-4 flex justify-end gap-2"}) {
@ui.Button(ui.ButtonProps{Variant: "outline"}) {
Cancel
}
@ui.Button(ui.ButtonProps{Variant: "destructive"}) {
Delete
}
}
}
}
import "github.com/fastygo/templ/ui"
templ Example() {
@ui.Box(ui.BoxProps{Class: "max-w-sm rounded-lg border border-border bg-card p-4"}) {
@ui.Title(ui.TitleProps{Order: 3, Class: "text-base font-semibold"}, "Are you sure?")
@ui.Text(ui.TextProps{Class: "text-sm text-muted-foreground"}, "This action cannot be undone.")
@ui.Group(ui.GroupProps{Class: "mt-4 flex justify-end gap-2"}) {
@ui.Button(ui.ButtonProps{Variant: "outline"}) {
Cancel
}
@ui.Button(ui.ButtonProps{Variant: "destructive"}) {
Delete
}
}
}
}API
Title · Title — Alert heading