Glrk UI

Alert Dialog

A wrapper for Base UI Alert Dialog with flexible trigger composition, async loading state, media slot, and detached trigger support.

Basic
Triggers
Controlled
Detached
Async

Installation

npx shadcn@latest add @glrk-ui/alert-dialog

If you haven't set up the prerequisites yet, check out Prerequest section.

Copy and paste the following code into your project.

ui/alert-dialog.tsx
'use client'

import * as React from 'react'
import { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog'
import { Loader } from 'lucide-react'

import { cn } from '@/lib/utils'

import { Button } from '@/components/ui/button'

function AlertDialog(props: AlertDialogPrimitive.Root.Props) {
  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
}

function AlertDialogTrigger(props: AlertDialogPrimitive.Trigger.Props) {
  return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
}

function AlertDialogPortal(props: AlertDialogPrimitive.Portal.Props) {
  return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
}

function AlertDialogOverlay({ className, ...props }: AlertDialogPrimitive.Backdrop.Props) {
  return (
    <AlertDialogPrimitive.Backdrop
      data-slot="alert-dialog-overlay"
      className={cn(
        'fixed inset-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0',
        className,
      )}
      {...props}
    />
  )
}

function AlertDialogContent({
  className,
  size = 'default',
  ...props
}: AlertDialogPrimitive.Popup.Props & {
  size?: 'default' | 'sm'
}) {
  return (
    <AlertDialogPortal>
      <AlertDialogOverlay />
      <AlertDialogPrimitive.Popup
        data-slot="alert-dialog-content"
        data-size={size}
        className={cn(
          'group/alert-dialog-content fixed top-1/2 left-1/2 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-background p-4 ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
          className,
        )}
        {...props}
      />
    </AlertDialogPortal>
  )
}

function AlertDialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="alert-dialog-header"
      className={cn(
        'grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]',
        className,
      )}
      {...props}
    />
  )
}

function AlertDialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="alert-dialog-footer"
      className={cn(
        '-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 px-4 py-2.5 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end',
        className,
      )}
      {...props}
    />
  )
}

function AlertDialogMedia({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot="alert-dialog-media"
      className={cn(
        "mb-2 inline-flex size-10 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6",
        className,
      )}
      {...props}
    />
  )
}

function AlertDialogTitle({
  className,
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
  return (
    <AlertDialogPrimitive.Title
      data-slot="alert-dialog-title"
      className={cn(
        'text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2',
        className,
      )}
      {...props}
    />
  )
}

function AlertDialogDescription({
  className,
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
  return (
    <AlertDialogPrimitive.Description
      data-slot="alert-dialog-description"
      className={cn(
        'text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground',
        className,
      )}
      {...props}
    />
  )
}

function AlertDialogAction({
  className,
  variant = 'destructive',
  ...props
}: React.ComponentProps<typeof Button>) {
  return <Button data-slot="alert-dialog-action" variant={variant} className={cn(className)} {...props} />
}

function AlertDialogCancel({
  className,
  variant = 'outline',
  size = 'default',
  ...props
}: AlertDialogPrimitive.Close.Props &
  Pick<React.ComponentProps<typeof Button>, 'variant' | 'size'>) {
  return (
    <AlertDialogPrimitive.Close
      data-slot="alert-dialog-cancel"
      className={cn(className)}
      render={<Button variant={variant} size={size} />}
      {...props}
    />
  )
}


type AlertDialogFooterWrapperProps = {
  cancel?: React.ReactNode
  action?: React.ReactNode
  loading?: boolean
  footerCls?: string
  actionCls?: string
  cancelCls?: string
  onAction?: () => void
  onCancel?: () => void
}

function AlertDialogFooterWrapper({
  cancel,
  action,
  loading = false,
  footerCls,
  actionCls,
  cancelCls,
  onAction = () => { },
  onCancel = () => { },
}: AlertDialogFooterWrapperProps) {
  return (
    <AlertDialogFooter className={cn(footerCls)}>
      {cancel && (
        <AlertDialogCancel onClick={onCancel} className={cn(cancelCls)} disabled={loading}>
          {cancel}
        </AlertDialogCancel>
      )}

      {action && (
        <AlertDialogAction onClick={onAction} className={cn(actionCls)} disabled={loading}>
          {loading && <Loader className="animate-spin" />}{action}
        </AlertDialogAction>
      )}
    </AlertDialogFooter>
  )
}

type AlertDialogWrapperProps = {
  title?: React.ReactNode
  trigger?: React.ReactNode
  children?: React.ReactNode
  description?: React.ReactNode
  media?: React.ReactNode
  triggerCls?: string
  triggerProps?: Omit<AlertDialogPrimitive.Trigger.Props, 'children' | 'className'>
  descriptionCls?: string
  contentCls?: string
  headerCls?: string
  titleCls?: string
} & AlertDialogFooterWrapperProps

function AlertDialogWrapper({
  trigger,
  title = 'Are you absolutely sure?',
  description = 'This action cannot be undone. This will permanently remove your data from our servers.',
  children,
  media,
  triggerCls,
  triggerProps,
  contentCls,
  headerCls,
  titleCls,
  descriptionCls,
  cancel = 'Cancel',
  action = 'Confirm',
  loading = false,
  footerCls,
  actionCls,
  cancelCls,
  onAction,
  onCancel,
  onOpenChange,
  ...props
}: React.ComponentProps<typeof AlertDialogPrimitive.Root> & AlertDialogWrapperProps) {
  return (
    <AlertDialog
      {...props}
      onOpenChange={(open, eventDetails) => {
        if (!open && loading) {
          eventDetails.cancel()
          return
        }
        onOpenChange?.(open, eventDetails)
      }}
    >
      {trigger && (
        <AlertDialogTrigger className={cn(triggerCls)} {...triggerProps}>
          {trigger}
        </AlertDialogTrigger>
      )}

      <AlertDialogContent className={cn(contentCls)}>
        <AlertDialogHeader className={cn(headerCls)}>
          {media && <AlertDialogMedia>{media}</AlertDialogMedia>}
          <AlertDialogTitle className={cn(titleCls)}>{title}</AlertDialogTitle>
          {description && (
            <AlertDialogDescription className={cn(descriptionCls)}>
              {description}
            </AlertDialogDescription>
          )}
        </AlertDialogHeader>

        {children}

        {(!!cancel || !!action) && (
          <AlertDialogFooterWrapper
            cancel={cancel}
            action={action}
            loading={loading}
            footerCls={footerCls}
            actionCls={actionCls}
            cancelCls={cancelCls}
            onAction={onAction}
            onCancel={onCancel}
          />
        )}
      </AlertDialogContent>
    </AlertDialog>
  )
}

export {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogMedia,
  AlertDialogOverlay,
  AlertDialogPortal,
  AlertDialogTitle,
  AlertDialogTrigger,
  AlertDialogWrapper,
  AlertDialogFooterWrapper,
}

Usage

Basic

import { AlertDialogWrapper } from "@/components/ui/alert-dialog"

export function Basic() {
  return (
    <AlertDialogWrapper
      trigger="Delete"
      triggerCls={buttonVariants({ variant: 'outline' })}
    />
  )
}

Icon trigger

Pass any ReactNode as trigger — icon only, icon + text, or any element:

<AlertDialogWrapper
  trigger={<><Trash2 /> Delete</>}
  triggerCls={buttonVariants({ variant: 'destructive' })}
  action="Delete"
/>

Custom element trigger

Use triggerProps.render to replace the default <button> with any element. Set nativeButton={false} for non-button elements:

// Anchor link trigger
<AlertDialogWrapper
  trigger="Delete file"
  triggerProps={{
    render: <a href="#" />,
    nativeButton: false,
  }}
  triggerCls="text-sm text-destructive underline underline-offset-4"
/>

// Custom forwardRef component trigger
const MyTrigger = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(
  ({ children, ...props }, ref) => <div ref={ref} {...props}>{children}</div>
)

<AlertDialogWrapper
  trigger="Open"
  triggerProps={{ render: <MyTrigger />, nativeButton: false }}
/>

With media

Pass an icon or image to the media prop to render it in the header:

<AlertDialogWrapper
  trigger="Delete account"
  media={<Trash2 />}
  title="Delete account?"
  description="All your data will be permanently deleted."
  action="Delete"
/>

Controlled

export function Controlled() {
  const [open, setOpen] = useState(false)

  return (
    <>
      <button onClick={() => setOpen(true)}>Open</button>

      <AlertDialogWrapper
        open={open}
        onOpenChange={setOpen}
        title="Leave page?"
        description="You have unsaved changes."
        action="Leave"
        onAction={() => setOpen(false)}
      />
    </>
  )
}

Async action with loading state

Pass loading to disable buttons and show a spinner on the action button. Dialog blocks Escape and backdrop close while loading:

export function AsyncDelete() {
  const [open, setOpen] = useState(false)
  const [loading, setLoading] = useState(false)

  async function handleDelete() {
    setLoading(true)
    await deleteRecord()
    setLoading(false)
    setOpen(false)
  }

  return (
    <AlertDialogWrapper
      open={open}
      onOpenChange={setOpen}
      trigger="Delete"
      title="Delete this record?"
      description="This will permanently delete the record."
      loading={loading}
      onAction={handleDelete}
    />
  )
}

Detached trigger

Place the trigger outside the wrapper using AlertDialog.createHandle():

import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog"
import { AlertDialogTrigger, AlertDialogWrapper } from "@/components/ui/alert-dialog"

const handle = AlertDialogPrimitive.createHandle()

<AlertDialogTrigger handle={handle}>Open</AlertDialogTrigger>

<AlertDialogWrapper
  handle={handle}
  title="Are you sure?"
  description="This cannot be undone."
/>

Multiple detached triggers

Multiple triggers can share one dialog via the same handle:

const handle = AlertDialogPrimitive.createHandle()

<AlertDialogTrigger handle={handle}>Trigger 1</AlertDialogTrigger>
<AlertDialogTrigger handle={handle}>Trigger 2</AlertDialogTrigger>

<AlertDialogWrapper handle={handle} title="Shared dialog" />

Custom footer content

Set action="" and cancel="" to hide the default footer, then pass custom footer via children:

<AlertDialogWrapper
  trigger="Open"
  action=""
  cancel=""
>
  <AlertDialogFooter>
    <AlertDialogCancel>Cancel</AlertDialogCancel>
    <AlertDialogAction onClick={handleAction}>Confirm</AlertDialogAction>
  </AlertDialogFooter>
</AlertDialogWrapper>

Reference

AlertDialogFooterWrapper

Prop

Type

AlertDialogWrapper

Prop

Type

Introduction

A streamlined approach to using Shadcn UI components with type-safe wrappers and flexible option handling

Dialog

A wrapper for Base UI Dialog with flexible trigger composition, async loading state, nested dialogs, and detached trigger support.

On this page

InstallationUsageBasicIcon triggerCustom element triggerWith mediaControlledAsync action with loading stateDetached triggerMultiple detached triggersCustom footer contentReferenceAlertDialogFooterWrapperAlertDialogWrapperRelated Components