Alert Dialog

A modal dialog that interrupts the user with important content and expects a response.

package examples import (

package examples import (	"github.com/axadrn/shadcn-templ/v2/components/alertdialog"	"github.com/axadrn/shadcn-templ/v2/components/button") templ AlertDialogDemo() {	@alertdialog.AlertDialog() {		@button.Button(button.Props{			Variant:    button.VariantOutline,			Attributes: alertdialog.Trigger(ctx),		}) {			Show Dialog		}		@alertdialog.Content() {			@alertdialog.Header() {				@alertdialog.Title() {					Are you absolutely sure?				}				@alertdialog.Description() {					This action cannot be undone. This will permanently delete your account from our servers.				}			}			@alertdialog.Footer() {				@alertdialog.Cancel() {					Cancel				}				@alertdialog.Action() {					Continue				}			}		}	}}

Installation

shadcn-templ add alert-dialog

Copy and paste the following code into your project.

components/alertdialog/alertdialog.templ

package alertdialog import (	"context" 	"github.com/axadrn/shadcn-templ/v2/components/button"	"github.com/axadrn/shadcn-templ/v2/utils") type ctxKey string const stateKey ctxKey = "alertDialogState" type Size string const (	SizeDefault Size = "default"	SizeSm      Size = "sm") type ctxState struct {	id   string	open bool} func state(ctx context.Context) ctxState {	if s, ok := ctx.Value(stateKey).(ctxState); ok {		return s	}	return ctxState{}} type Props struct {	ID string	// Open renders the alert dialog already open on page load.	Open bool} type ContentProps struct {	Class      string	Attributes templ.Attributes	// Size of the alert dialog. Defaults to default.	Size Size} type HeaderProps struct {	ID         string	Class      string	Attributes templ.Attributes} type FooterProps struct {	ID         string	Class      string	Attributes templ.Attributes} type MediaProps struct {	ID         string	Class      string	Attributes templ.Attributes} type TitleProps struct {	ID         string	Class      string	Attributes templ.Attributes} type DescriptionProps struct {	ID         string	Class      string	Attributes templ.Attributes} type ActionProps struct {	ID         string	Class      string	Attributes templ.Attributes	Variant    button.Variant	Size       button.Size} type CancelProps struct {	ID         string	Class      string	Attributes templ.Attributes	// Variant of the cancel button. Defaults to outline, like shadcn.	Variant button.Variant	Size    button.Size} // AlertDialog renders no element: it only carries the id and options that// link Trigger, Content and Cancel (via ctx). Like shadcn, the alert dialog// IS the dialog primitive without light dismiss; the dialog script drives it.templ AlertDialog(props ...Props) {	{{ var p Props }}	if len(props) > 0 {		{{ p = props[0] }}	}	if p.ID == "" {		{{ p.ID = utils.RandomID() }}	}	{{ ctx = context.WithValue(ctx, stateKey, ctxState{id: p.ID, open: p.Open}) }}	{ children... }} // Trigger returns the attributes that turn any element (usually a button)// into the alert dialog trigger — the asChild equivalent: no wrapper element.func Trigger(ctx context.Context) templ.Attributes {	return TriggerFor(state(ctx).id)} // TriggerFor targets an alert dialog outside the current AlertDialog root by id.func TriggerFor(id string) templ.Attributes {	return templ.Attributes{		"data-tui-dialog-trigger": true,		"aria-controls":           id,		"aria-haspopup":           "dialog",		"aria-expanded":           "false",	}} // Close returns the attributes that make any element close the alert dialog.func Close(ctx context.Context) templ.Attributes {	return CloseFor(state(ctx).id)} // CloseFor targets an alert dialog outside the current AlertDialog root by id.func CloseFor(id string) templ.Attributes {	return templ.Attributes{		"data-tui-dialog-close":  true,		"data-tui-dialog-target": id,	}} // PortalProps is AlertDialogPortal's surface: the portal node renders no// visible element of its own.type PortalProps struct {	Attributes templ.Attributes} // Portal is 1:1 base/ui/alert-dialog.tsx AlertDialogPortal. Inert until the// script portals it to <body> at init; it shares the dialog machinery's// data attributes because Base UI's AlertDialog composes Dialog.templ Portal(props ...PortalProps) {	{{ var p PortalProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	<template data-tui-dialog-portal>		<div data-tui-dialog-root hidden { p.Attributes... }>			{ children... }		</div>	</template>} type OverlayProps struct {	ID         string	Class      string	Attributes templ.Attributes} // Overlay is 1:1 base/ui/alert-dialog.tsx AlertDialogOverlay// (AlertDialog.Backdrop): the look comes from cn-alert-dialog-overlay.// user-select none is Base UI's inline style on the backdrop.templ Overlay(props ...OverlayProps) {	{{ var p OverlayProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	<div		if p.ID != "" {			id={ p.ID }		}		data-slot="alert-dialog-overlay"		data-tui-dialog-backdrop		role="presentation"		style="user-select: none; -webkit-user-select: none;"		class={ utils.CN("cn-alert-dialog-overlay fixed inset-0 isolate z-50", p.Class) }		{ p.Attributes... }	></div>} templ Content(props ...ContentProps) {	{{ var p ContentProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	if p.Size == "" {		{{ p.Size = SizeDefault }}	}	{{ s := state(ctx) }}	// Base UI's AlertDialog is a Dialog with disablePointerDismissal locked	// on: a press on the backdrop never closes it (disable-dismissible on	// the popup), only Esc and the buttons do.	@Portal() {		@Overlay()			// 1:1 base/ui/alert-dialog.tsx AlertDialogContent			// (AlertDialog.Popup): the look comes from cn-alert-dialog-content.			<div				id={ s.id }				role="alertdialog"				tabindex="-1"				data-slot="alert-dialog-content"				data-tui-dialog-content				data-size={ string(p.Size) }				data-tui-dialog-initial-open={ utils.IfElse(s.open, "true", "false") }				data-tui-dialog-show-modal="true"				data-tui-dialog-disable-dismissible="true"				class={					utils.CN(						"cn-alert-dialog-content group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 outline-none",						p.Class,					),				}				{ p.Attributes... }			>				{ children... }			</div>	}} templ Header(props ...HeaderProps) {	{{ var p HeaderProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	<div		if p.ID != "" {			id={ p.ID }		}		data-slot="alert-dialog-header"		class={ utils.CN("cn-alert-dialog-header", p.Class) }		{ p.Attributes... }	>		{ children... }	</div>} templ Footer(props ...FooterProps) {	{{ var p FooterProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	<div		if p.ID != "" {			id={ p.ID }		}		data-slot="alert-dialog-footer"		class={ utils.CN("cn-alert-dialog-footer flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end", p.Class) }		{ p.Attributes... }	>		{ children... }	</div>} templ Media(props ...MediaProps) {	{{ var p MediaProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	<div		if p.ID != "" {			id={ p.ID }		}		data-slot="alert-dialog-media"		class={ utils.CN("cn-alert-dialog-media", p.Class) }		{ p.Attributes... }	>		{ children... }	</div>} templ Title(props ...TitleProps) {	{{ var p TitleProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	<div		if p.ID != "" {			id={ p.ID }		}		data-slot="alert-dialog-title"		data-tui-dialog-title		class={ utils.CN("cn-alert-dialog-title cn-font-heading", p.Class) }		{ p.Attributes... }	>		{ children... }	</div>} templ Description(props ...DescriptionProps) {	{{ var p DescriptionProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	<div		if p.ID != "" {			id={ p.ID }		}		data-slot="alert-dialog-description"		data-tui-dialog-description		class={ utils.CN("cn-alert-dialog-description", p.Class) }		{ p.Attributes... }	>		{ children... }	</div>} // Action is a plain button, exactly like shadcn's AlertDialogAction: it does// not close the alert dialog by itself. Spread alertdialog.Close(ctx) into// Attributes (or submit a form) to wire the confirm behavior.templ Action(props ...ActionProps) {	{{ var p ActionProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	{{		attrs := templ.Attributes{"data-slot": "alert-dialog-action"}		for k, v := range p.Attributes {			attrs[k] = v		}	}}	@button.Button(button.Props{		ID:         p.ID,		Variant:    p.Variant,		Size:       p.Size,		Class:      utils.CN("cn-alert-dialog-action", p.Class),		Attributes: attrs,	}) {		{ children... }	}} // Cancel closes the alert dialog, rendered as an outline button like shadcn.templ Cancel(props ...CancelProps) {	{{ var p CancelProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	if p.Variant == "" {		{{ p.Variant = button.VariantOutline }}	}	{{		attrs := templ.Attributes{			"data-slot":              "alert-dialog-cancel",			"data-tui-dialog-close":  true,			"data-tui-dialog-target": state(ctx).id,		}		for k, v := range p.Attributes {			attrs[k] = v		}	}}	@button.Button(button.Props{		ID:         p.ID,		Variant:    p.Variant,		Size:       p.Size,		Class:      utils.CN("cn-alert-dialog-cancel", p.Class),		Attributes: attrs,	}) {		{ children... }	}}

The alert dialog reuses the dialog component and its script. Copy the dialog component as well, including dialog.js.

Component scripts are loaded through the shared script bundle, see JavaScript.

Update the import paths to match your project setup.

Usage

import "github.com/axadrn/shadcn-templ/v2/components/alertdialog"

@alertdialog.AlertDialog() {	@button.Button(button.Props{Attributes: alertdialog.Trigger(ctx)}) {		Show Dialog	}	@alertdialog.Content() {		@alertdialog.Header() {			@alertdialog.Title() {				Are you absolutely sure?			}			@alertdialog.Description() {				This action cannot be undone. This will permanently delete your account				from our servers.			}		}		@alertdialog.Footer() {			@alertdialog.Cancel() {				Cancel			}			@alertdialog.Action() {				Continue			}		}	}}

Composition

Use the following composition to build an AlertDialog:

alertdialog.AlertDialog├── alertdialog.Trigger└── alertdialog.Content    ├── alertdialog.Header    │   ├── alertdialog.Media    │   ├── alertdialog.Title    │   └── alertdialog.Description    └── alertdialog.Footer        ├── alertdialog.Cancel        └── alertdialog.Action

Basic

A basic alert dialog with a title, description, and cancel and continue buttons.

package examples import (

package examples import (	"github.com/axadrn/shadcn-templ/v2/components/alertdialog"	"github.com/axadrn/shadcn-templ/v2/components/button") templ AlertDialogBasic() {	@alertdialog.AlertDialog() {		@button.Button(button.Props{			Variant:    button.VariantOutline,			Attributes: alertdialog.Trigger(ctx),		}) {			Show Dialog		}		@alertdialog.Content() {			@alertdialog.Header() {				@alertdialog.Title() {					Are you absolutely sure?				}				@alertdialog.Description() {					This action cannot be undone. This will permanently delete your account and remove your data from our servers.				}			}			@alertdialog.Footer() {				@alertdialog.Cancel() {					Cancel				}				@alertdialog.Action() {					Continue				}			}		}	}}

Small

Use the Size prop to make the alert dialog smaller.

package examples import (

package examples import (	"github.com/axadrn/shadcn-templ/v2/components/alertdialog"	"github.com/axadrn/shadcn-templ/v2/components/button") templ AlertDialogSmall() {	@alertdialog.AlertDialog() {		@button.Button(button.Props{			Variant:    button.VariantOutline,			Attributes: alertdialog.Trigger(ctx),		}) {			Show Dialog		}		@alertdialog.Content(alertdialog.ContentProps{Size: alertdialog.SizeSm}) {			@alertdialog.Header() {				@alertdialog.Title() {					Allow accessory to connect?				}				@alertdialog.Description() {					Do you want to allow the USB accessory to connect to this device?				}			}			@alertdialog.Footer() {				@alertdialog.Cancel() {					Don't allow				}				@alertdialog.Action() {					Allow				}			}		}	}}

Media

Use the alertdialog.Media component to add a media element such as an icon or image to the alert dialog.

package examples import (

package examples import (	"github.com/axadrn/shadcn-templ/v2/components/alertdialog"	"github.com/axadrn/shadcn-templ/v2/components/button"	"github.com/axadrn/shadcn-templ/v2/components/icon") templ AlertDialogWithMedia() {	@alertdialog.AlertDialog() {		@button.Button(button.Props{			Variant:    button.VariantOutline,			Attributes: alertdialog.Trigger(ctx),		}) {			Share Project		}		@alertdialog.Content() {			@alertdialog.Header() {				@alertdialog.Media() {					@icon.CircleFadingPlus()				}				@alertdialog.Title() {					Share this project?				}				@alertdialog.Description() {					Anyone with the link will be able to view and edit this project.				}			}			@alertdialog.Footer() {				@alertdialog.Cancel() {					Cancel				}				@alertdialog.Action() {					Share				}			}		}	}}

Small with Media

Use the Size prop to make the alert dialog smaller and the alertdialog.Media component to add a media element such as an icon or image to the alert dialog.

package examples import (

package examples import (	"github.com/axadrn/shadcn-templ/v2/components/alertdialog"	"github.com/axadrn/shadcn-templ/v2/components/button"	"github.com/axadrn/shadcn-templ/v2/components/icon") templ AlertDialogSmallWithMedia() {	@alertdialog.AlertDialog() {		@button.Button(button.Props{			Variant:    button.VariantOutline,			Attributes: alertdialog.Trigger(ctx),		}) {			Show Dialog		}		@alertdialog.Content(alertdialog.ContentProps{Size: alertdialog.SizeSm}) {			@alertdialog.Header() {				@alertdialog.Media() {					@icon.Bluetooth()				}				@alertdialog.Title() {					Allow accessory to connect?				}				@alertdialog.Description() {					Do you want to allow the USB accessory to connect to this device?				}			}			@alertdialog.Footer() {				@alertdialog.Cancel() {					Don't allow				}				@alertdialog.Action() {					Allow				}			}		}	}}

Destructive

Use the alertdialog.Action component to add a destructive action button to the alert dialog.

package examples import (

package examples import (	"github.com/axadrn/shadcn-templ/v2/components/alertdialog"	"github.com/axadrn/shadcn-templ/v2/components/button"	"github.com/axadrn/shadcn-templ/v2/components/icon") templ AlertDialogDestructive() {	@alertdialog.AlertDialog() {		@button.Button(button.Props{			Variant:    button.VariantDestructive,			Attributes: alertdialog.Trigger(ctx),		}) {			Delete Chat		}		@alertdialog.Content(alertdialog.ContentProps{Size: alertdialog.SizeSm}) {			@alertdialog.Header() {				@alertdialog.Media(alertdialog.MediaProps{Class: "bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive"}) {					@icon.Trash2()				}				@alertdialog.Title() {					Delete chat?				}				@alertdialog.Description() {					This will permanently delete this chat conversation. View <a href="#">Settings</a> delete any memories saved during this chat.				}			}			@alertdialog.Footer() {				@alertdialog.Cancel(alertdialog.CancelProps{Variant: button.VariantOutline}) {					Cancel				}				@alertdialog.Action(alertdialog.ActionProps{Variant: button.VariantDestructive}) {					Delete				}			}		}	}}

API Reference

AlertDialog

The AlertDialog component is the root that links trigger, content and cancel via context. Unlike the dialog, it never closes on a click outside, only Esc and its buttons close it.

Prop	Type	Default
`Open`	`bool`	`false`

Trigger

alertdialog.Trigger(ctx) returns the attributes that turn any element into the trigger, usually spread onto a Button. Use alertdialog.TriggerFor(id) to target an alert dialog outside the current root.

Prop	Type	Default
`ctx`	`context.Context`	-

Content

The alertdialog.Content component is the alert dialog window.

Prop	Type	Default
`Size`	`"default" \| "sm"`	`"default"`
`Class`	`string`	-

The alertdialog.Header component holds the media, title and description.

Prop	Type	Default
`Class`	`string`	-

Media

The alertdialog.Media component holds a media element such as an icon or image.

Prop	Type	Default
`Class`	`string`	-

Title

The alertdialog.Title component is the accessible alert dialog title.

Prop	Type	Default
`Class`	`string`	-

Description

The alertdialog.Description component is the accessible alert dialog description.

Prop	Type	Default
`Class`	`string`	-

The alertdialog.Footer component holds the actions at the bottom of the alert dialog.

Prop	Type	Default
`Class`	`string`	-

Action

The alertdialog.Action component is the confirm button. Like shadcn’s AlertDialogAction it is a plain button and does not close the alert dialog by itself, spread alertdialog.Close(ctx) into Attributes or submit a form to wire the confirm behavior.

Prop	Type	Default
`Variant`	`button.Variant`	`"default"`
`Size`	`button.Size`	`"default"`
`Class`	`string`	-

Cancel

The alertdialog.Cancel component is the button that closes the alert dialog.

Prop	Type	Default
`Variant`	`button.Variant`	`"outline"`
`Size`	`button.Size`	`"default"`
`Class`	`string`	-

Close

alertdialog.Close(ctx) returns the attributes that make any element close the alert dialog. Use alertdialog.CloseFor(id) to target an alert dialog outside the current root.

Prop	Type	Default
`ctx`	`context.Context`	-

Alert Aspect Ratio

On This Page

Installation Usage Composition Basic Small Media Small with Media Destructive API Reference AlertDialog Trigger Content Header Media Title Description Footer Action Cancel Close

Ship your shadcn-templ app with goilerplate

The Go + templ SaaS boilerplate. Auth, payments, UI. Done.

Now $99 instead of $199.