Alert Dialog

Alert dialog wrappers

import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '@/components/ui/alert-dialog'
import { Button } from '@/components/ui/button'
...

import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '@/components/ui/alert-dialog'
import { Button } from '@/components/ui/button'

export default function AlertDialogDemoExample() {
  return (
    <AlertDialog>
      <AlertDialogTrigger asChild><Button variant="outline">Show Dialog</Button></AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader><AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle><AlertDialogDescription>This action cannot be undone. This will permanently delete your account from our servers.</AlertDialogDescription></AlertDialogHeader>
        <AlertDialogFooter><AlertDialogCancel>Cancel</AlertDialogCancel><AlertDialogAction>Continue</AlertDialogAction></AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}

Installation

npx @fictjs/shadcn@latest add alert-dialog

Install the runtime dependencies:

npm install @fictjs/radix-ui

Copy the Fict shadcn component into your project.

Source

components/ui/alert-dialog.tsx

src/components/ui/alert-dialog.tsx

import { AlertDialog as AlertDialogPrimitive } from '@fictjs/radix-ui'

import { cn } from '@/lib/cn'
import { buttonVariants } from '@/components/ui/button'

export const AlertDialog = AlertDialogPrimitive.Root
export const AlertDialogPortal = AlertDialogPrimitive.Portal
export const AlertDialogTrigger = AlertDialogPrimitive.Trigger

type GenericProps = {
  class?: string
  children?: unknown
  [key: string]: unknown
}

type AlertDialogContentProps = GenericProps & {
  size?: 'default' | 'sm'
}

type AlertDialogActionProps = GenericProps & {
  variant?: 'default' | 'destructive'
}

export function AlertDialogOverlay(props: GenericProps) {
  const { class: className, ...rest } = props
  return <AlertDialogPrimitive.Overlay class={cn('fixed inset-0 z-50 bg-background/80 backdrop-blur-sm', className)} {...rest} />
}

export function AlertDialogContent(props: AlertDialogContentProps) {
  const { class: className, children, size = 'default', ...rest } = props
  return (
    <>
      <AlertDialogOverlay />
      <AlertDialogPrimitive.Content
        class={cn(
          'fixed left-1/2 top-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 sm:rounded-lg',
          size === 'sm' ? 'max-w-xs' : 'max-w-lg',
          className,
        )}
        {...rest}
      >
        {children}
      </AlertDialogPrimitive.Content>
    </>
  )
}

export function AlertDialogHeader(props: GenericProps) {
  const { class: className, ...rest } = props
  return <div class={cn('flex flex-col space-y-2 text-center sm:text-left', className)} {...rest} />
}

export function AlertDialogFooter(props: GenericProps) {
  const { class: className, ...rest } = props
  return <div class={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)} {...rest} />
}

export function AlertDialogTitle(props: GenericProps) {
  const { class: className, ...rest } = props
  return <AlertDialogPrimitive.Title class={cn('text-lg font-semibold', className)} {...rest} />
}

export function AlertDialogDescription(props: GenericProps) {
  const { class: className, ...rest } = props
  return <AlertDialogPrimitive.Description class={cn('text-sm text-muted-foreground', className)} {...rest} />
}

export function AlertDialogMedia(props: GenericProps) {
  const { class: className, ...rest } = props
  return <div class={cn('mb-2 flex size-10 items-center justify-center rounded-full bg-muted [&_svg]:size-5', className)} {...rest} />
}

export function AlertDialogAction(props: AlertDialogActionProps) {
  const { class: className, variant = 'default', ...rest } = props
  return <AlertDialogPrimitive.Action class={cn(buttonVariants({ variant }), className)} {...rest} />
}

export function AlertDialogCancel(props: GenericProps) {
  const { class: className, ...rest } = props
  return <AlertDialogPrimitive.Cancel class={cn(buttonVariants({ variant: 'outline' }), className)} {...rest} />
}

Usage

Examples

Basic

import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '@/components/ui/alert-dialog'
import { Button } from '@/components/ui/button'
...

import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '@/components/ui/alert-dialog'
import { Button } from '@/components/ui/button'

export default function AlertDialogBasicExample() {
  return (
    <AlertDialog>
      <AlertDialogTrigger asChild><Button variant="outline">Show Dialog</Button></AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader><AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle><AlertDialogDescription>This action cannot be undone. This will permanently delete your account from our servers.</AlertDialogDescription></AlertDialogHeader>
        <AlertDialogFooter><AlertDialogCancel>Cancel</AlertDialogCancel><AlertDialogAction>Continue</AlertDialogAction></AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}

Small

import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '@/components/ui/alert-dialog'
import { Button } from '@/components/ui/button'
...

import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '@/components/ui/alert-dialog'
import { Button } from '@/components/ui/button'

export default function AlertDialogSmallExample() {
  return (
    <AlertDialog>
      <AlertDialogTrigger asChild><Button variant="outline">Show Dialog</Button></AlertDialogTrigger>
      <AlertDialogContent size="sm">
        <AlertDialogHeader><AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle><AlertDialogDescription>Do you want to allow the USB accessory to connect to this device?</AlertDialogDescription></AlertDialogHeader>
        <AlertDialogFooter><AlertDialogCancel>Don't allow</AlertDialogCancel><AlertDialogAction>Allow</AlertDialogAction></AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}

Media

import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogTitle, AlertDialogTrigger } from '@/components/ui/alert-dialog'
import { Button } from '@/components/ui/button'
...

import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogTitle, AlertDialogTrigger } from '@/components/ui/alert-dialog'
import { Button } from '@/components/ui/button'

function ShareIcon() {
  return <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="9" /><path d="m12 8 3 3-3 3M9 11h6" /></svg>
}

export default function AlertDialogMediaExample() {
  return (
    <AlertDialog>
      <AlertDialogTrigger asChild><Button variant="outline">Share Project</Button></AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader><AlertDialogMedia><ShareIcon /></AlertDialogMedia><AlertDialogTitle>Share this project?</AlertDialogTitle><AlertDialogDescription>Anyone with the link will be able to view and edit this project.</AlertDialogDescription></AlertDialogHeader>
        <AlertDialogFooter><AlertDialogCancel>Cancel</AlertDialogCancel><AlertDialogAction>Share</AlertDialogAction></AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}

Small Media

import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogTitle, AlertDialogTrigger } from '@/components/ui/alert-dialog'
import { Button } from '@/components/ui/button'
...

import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogTitle, AlertDialogTrigger } from '@/components/ui/alert-dialog'
import { Button } from '@/components/ui/button'

function BluetoothIcon() {
  return <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="m7 7 10 10-5 4V3l5 4L7 17" /></svg>
}

export default function AlertDialogSmallMediaExample() {
  return (
    <AlertDialog>
      <AlertDialogTrigger asChild><Button variant="outline">Show Dialog</Button></AlertDialogTrigger>
      <AlertDialogContent size="sm">
        <AlertDialogHeader><AlertDialogMedia><BluetoothIcon /></AlertDialogMedia><AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle><AlertDialogDescription>Do you want to allow the USB accessory to connect to this device?</AlertDialogDescription></AlertDialogHeader>
        <AlertDialogFooter><AlertDialogCancel>Don't allow</AlertDialogCancel><AlertDialogAction>Allow</AlertDialogAction></AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}

Destructive

import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogTitle, AlertDialogTrigger } from '@/components/ui/alert-dialog'
import { Button } from '@/components/ui/button'
...

import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogTitle, AlertDialogTrigger } from '@/components/ui/alert-dialog'
import { Button } from '@/components/ui/button'

function TrashIcon() {
  return <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M4 7h16M10 11v6M14 11v6M5 7l1 14h12l1-14M9 7V4h6v3" /></svg>
}

export default function AlertDialogDestructiveExample() {
  return (
    <AlertDialog>
      <AlertDialogTrigger asChild><Button variant="destructive">Delete Chat</Button></AlertDialogTrigger>
      <AlertDialogContent size="sm">
        <AlertDialogHeader><AlertDialogMedia class="bg-destructive/10 text-destructive"><TrashIcon /></AlertDialogMedia><AlertDialogTitle>Delete chat?</AlertDialogTitle><AlertDialogDescription>This will permanently delete this chat conversation. View <a href="#settings">Settings</a> to delete any memories saved during this chat.</AlertDialogDescription></AlertDialogHeader>
        <AlertDialogFooter><AlertDialogCancel>Cancel</AlertDialogCancel><AlertDialogAction variant="destructive">Delete</AlertDialogAction></AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}

Rtl

import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogTitle, AlertDialogTrigger } from '@/components/ui/alert-dialog'
import { Button } from '@/components/ui/button'
...

import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogTitle, AlertDialogTrigger } from '@/components/ui/alert-dialog'
import { Button } from '@/components/ui/button'

const translations = {
  ar: [
    ['إظهار الحوار', 'هل أنت متأكد تمامًا؟', 'لا يمكن التراجع عن هذا الإجراء. سيؤدي هذا إلى حذف حسابك نهائيًا من خوادمنا.', 'إلغاء', 'متابعة', false],
    ['إظهار الحوار (صغير)', 'السماح للملحق بالاتصال؟', 'هل تريد السماح لملحق USB بالاتصال بهذا الجهاز؟', 'عدم السماح', 'السماح', true],
  ],
  he: [
    ['הצג דיאלוג', 'האם אתה בטוח לחלוטין?', 'פעולה זו לא ניתנת לביטול. זה ימחק לצמיתות את החשבון שלך מהשרתים שלנו.', 'ביטול', 'המשך', false],
    ['הצג דיאלוג (קטן)', 'לאפשר להתקן להתחבר?', 'האם אתה רוצה לאפשר להתקן USB להתחבר למכשיר זה?', 'אל תאפשר', 'אפשר', true],
  ],
  en: [
    ['Show Dialog', 'Are you absolutely sure?', 'This action cannot be undone. This will permanently delete your account from our servers.', 'Cancel', 'Continue', false],
    ['Show Dialog (sm)', 'Allow accessory to connect?', 'Do you want to allow the USB accessory to connect to this device?', "Don't allow", 'Allow', true],
  ],
} as const

function BluetoothIcon() {
  return <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="m7 7 10 10-5 4V3l5 4L7 17" /></svg>
}

export default function AlertDialogRtlExample() {
  let language = $state<keyof typeof translations>('ar')
  const direction = () => language === 'en' ? 'ltr' : 'rtl'

  return (
    <div dir={direction()}>
      <select value={language} onChange={event => { language = event.currentTarget.value as keyof typeof translations }}><option value="ar">Arabic (العربية)</option><option value="he">Hebrew (עברית)</option><option value="en">English</option></select>
      <div class="flex gap-2">
        {translations[language].map(([trigger, title, description, cancel, action, small]) => (
          <AlertDialog>
            <AlertDialogTrigger asChild><Button variant="outline">{trigger}</Button></AlertDialogTrigger>
            <AlertDialogContent size={small ? 'sm' : 'default'} dir={direction()}>
              <AlertDialogHeader>{small ? <AlertDialogMedia><BluetoothIcon /></AlertDialogMedia> : null}<AlertDialogTitle>{title}</AlertDialogTitle><AlertDialogDescription>{description}</AlertDialogDescription></AlertDialogHeader>
              <AlertDialogFooter><AlertDialogCancel>{cancel}</AlertDialogCancel><AlertDialogAction>{action}</AlertDialogAction></AlertDialogFooter>
            </AlertDialogContent>
          </AlertDialog>
        ))}
      </div>
    </div>
  )
}

Alert Aspect Ratio