AccordionAlertAlert DialogAspect RatioAvatarBadgeBreadcrumbButtonButton GroupCalendarCardCarouselChartCheckboxCollapsibleComboboxCommandContext MenuData TableDate PickerDialogDirectionDrawerDropdown MenuEmptyFieldHover CardInputInput GroupInput OTPItemKbdLabelMenubarNative SelectNavigation MenuPaginationPopoverProgressRadio GroupResizableScroll AreaSelectSeparatorSheetSidebarSkeletonSliderSonnerSpinnerSwitchTableTabsTextareaToastToggleToggle GroupTooltipTypography
Alert Dialog
A modal dialog that interrupts the user with important content and expects a response.
Are you absolutely sure?
This action cannot be undone. This will permanently delete your account and remove your data from our servers.
templ
templ AlertDialogDemo() {
@ui.AlertDialog("", nil) {
@ui.Button(ui.ButtonTypeButton, ui.ButtonVariantOutline, ui.ButtonSizeDefault, "", ui.AlertDialogTriggerAttrs) {
Show Dialog
}
@ui.AlertDialogContent("", nil) {
@ui.AlertDialogHeader("", nil) {
@ui.AlertDialogTitle("", nil) {
Are you absolutely sure?
}
@ui.AlertDialogDescription("", nil) {
This action cannot be undone. This will permanently delete your
account and remove your data from our servers.
}
}
@ui.AlertDialogFooter("", nil) {
@ui.Button(ui.ButtonTypeButton, ui.ButtonVariantOutline, ui.ButtonSizeDefault, "", ui.AlertDialogCancelAttrs) {
Cancel
}
@ui.Button(ui.ButtonTypeButton, ui.ButtonVariantDefault, ui.ButtonSizeDefault, "", ui.AlertDialogActionAttrs) {
Continue
}
}
}
}
}