Alert Dialog | arctis/ui

Use a modal prompt when an action deserves one last check. It includes a portal overlay, Escape dismissal, and controlled or uncontrolled open state.

tsx

1import {2  AlertDialog,3  AlertDialogAction,4  AlertDialogCancel,5  AlertDialogContent,6  AlertDialogDescription,7  AlertDialogFooter,8  AlertDialogHeader,9  AlertDialogTitle,10  AlertDialogTrigger,11} from "@/components/ui/alert-dialog"1213export function Example() {14  return (15    <AlertDialog>16      <AlertDialogTrigger>Ship update</AlertDialogTrigger>17      <AlertDialogContent>18        <AlertDialogHeader>19          <AlertDialogTitle>Ship this docs update?</AlertDialogTitle>20          <AlertDialogDescription>21            The changelog entry and component pages go live for everyone on the22            current namespace.23          </AlertDialogDescription>24        </AlertDialogHeader>25        <AlertDialogFooter>26          <AlertDialogCancel>Not yet</AlertDialogCancel>27          <AlertDialogAction>Ship</AlertDialogAction>28        </AlertDialogFooter>29      </AlertDialogContent>30    </AlertDialog>31  )32}

Installation

npx @arctis-sh/@arctis-sh/ui@latest add alert-dialog

Usage

1import {2  AlertDialog,3  AlertDialogAction,4  AlertDialogCancel,5  AlertDialogContent,6  AlertDialogDescription,7  AlertDialogFooter,8  AlertDialogHeader,9  AlertDialogTitle,10  AlertDialogTrigger,11} from "@/components/ui/alert-dialog"

1<AlertDialog>2  <AlertDialogTrigger>Publish draft</AlertDialogTrigger>3  <AlertDialogContent>4    <AlertDialogHeader>5      <AlertDialogTitle>Publish this draft?</AlertDialogTitle>6      <AlertDialogDescription>7        This page will be visible to everyone in the current namespace.8      </AlertDialogDescription>9    </AlertDialogHeader>10    <AlertDialogFooter>11      <AlertDialogCancel>Keep editing</AlertDialogCancel>12      <AlertDialogAction>Publish</AlertDialogAction>13    </AlertDialogFooter>14  </AlertDialogContent>15</AlertDialog>

Composition

AlertDialog
├── AlertDialogTrigger
└── AlertDialogContent
    ├── AlertDialogHeader
    │   ├── AlertDialogMedia
    │   ├── AlertDialogTitle
    │   └── AlertDialogDescription
    └── AlertDialogFooter
        ├── AlertDialogCancel
        └── AlertDialogAction

AlertDialogMedia is optional. When it contains an icon, the title and description sit beside it.

Basic

The trigger opens the dialog. Cancel closes it, while the action confirms the choice.

tsx

1import {2  AlertDialog,3  AlertDialogAction,4  AlertDialogCancel,5  AlertDialogContent,6  AlertDialogDescription,7  AlertDialogFooter,8  AlertDialogHeader,9  AlertDialogTitle,10  AlertDialogTrigger,11} from "@/components/ui/alert-dialog"1213export function Example() {14  return (15    <AlertDialog>16      <AlertDialogTrigger>Ship update</AlertDialogTrigger>17      <AlertDialogContent>18        <AlertDialogHeader>19          <AlertDialogTitle>Ship this docs update?</AlertDialogTitle>20          <AlertDialogDescription>21            The changelog entry and component pages go live for everyone on the22            current namespace.23          </AlertDialogDescription>24        </AlertDialogHeader>25        <AlertDialogFooter>26          <AlertDialogCancel>Not yet</AlertDialogCancel>27          <AlertDialogAction>Ship</AlertDialogAction>28        </AlertDialogFooter>29      </AlertDialogContent>30    </AlertDialog>31  )32}

Small

Set size="sm" on AlertDialogContent for a more compact panel.

tsx

1import {2  AlertDialog,3  AlertDialogAction,4  AlertDialogCancel,5  AlertDialogContent,6  AlertDialogDescription,7  AlertDialogFooter,8  AlertDialogHeader,9  AlertDialogTitle,10  AlertDialogTrigger,11} from "@/components/ui/alert-dialog"1213export function Example() {14  return (15    <AlertDialog>16      <AlertDialogTrigger>Discard edits</AlertDialogTrigger>17      <AlertDialogContent size="sm">18        <AlertDialogHeader>19          <AlertDialogTitle>Discard local edits?</AlertDialogTitle>20          <AlertDialogDescription>21            Unsaved markdown changes in this tab will be dropped.22          </AlertDialogDescription>23        </AlertDialogHeader>24        <AlertDialogFooter>25          <AlertDialogCancel>Keep</AlertDialogCancel>26          <AlertDialogAction>Discard</AlertDialogAction>27        </AlertDialogFooter>28      </AlertDialogContent>29    </AlertDialog>30  )31}

Outline

Set variant="outline" on AlertDialogContent for a bordered panel.

tsx

1import {2  AlertDialog,3  AlertDialogAction,4  AlertDialogCancel,5  AlertDialogContent,6  AlertDialogDescription,7  AlertDialogFooter,8  AlertDialogHeader,9  AlertDialogTitle,10  AlertDialogTrigger,11} from "@/components/ui/alert-dialog"1213export function Example() {14  return (15    <AlertDialog>16      <AlertDialogTrigger>Ship update</AlertDialogTrigger>17      <AlertDialogContent variant="outline">18        <AlertDialogHeader>19          <AlertDialogTitle>Ship this docs update?</AlertDialogTitle>20          <AlertDialogDescription>21            The changelog entry and component pages go live for everyone on the22            current namespace.23          </AlertDialogDescription>24        </AlertDialogHeader>25        <AlertDialogFooter>26          <AlertDialogCancel>Not yet</AlertDialogCancel>27          <AlertDialogAction>Ship</AlertDialogAction>28        </AlertDialogFooter>29      </AlertDialogContent>30    </AlertDialog>31  )32}

With icon

Use AlertDialogMedia for a leading icon with the copy beside it.

tsx

1import {2  AlertDialog,3  AlertDialogAction,4  AlertDialogCancel,5  AlertDialogContent,6  AlertDialogDescription,7  AlertDialogFooter,8  AlertDialogHeader,9  AlertDialogMedia,10  AlertDialogTitle,11  AlertDialogTrigger,12} from "@/components/ui/alert-dialog"1314export function Example() {15  return (16    <AlertDialog>17      <AlertDialogTrigger>Pull component</AlertDialogTrigger>18      <AlertDialogContent>19        <AlertDialogHeader>20          <AlertDialogMedia>21            <PackageIcon />22          </AlertDialogMedia>23          <AlertDialogTitle>Add alert to this repo?</AlertDialogTitle>24          <AlertDialogDescription>25            Files write into src/components/ui. You own them after install —26            no package lock-in.27          </AlertDialogDescription>28        </AlertDialogHeader>29        <AlertDialogFooter>30          <AlertDialogCancel>Cancel</AlertDialogCancel>31          <AlertDialogAction>Add</AlertDialogAction>32        </AlertDialogFooter>33      </AlertDialogContent>34    </AlertDialog>35  )36}

Small with icon

Combine size="sm" with AlertDialogMedia.

tsx

1import {2  AlertDialog,3  AlertDialogAction,4  AlertDialogCancel,5  AlertDialogContent,6  AlertDialogDescription,7  AlertDialogFooter,8  AlertDialogHeader,9  AlertDialogMedia,10  AlertDialogTitle,11  AlertDialogTrigger,12} from "@/components/ui/alert-dialog"1314export function Example() {15  return (16    <AlertDialog>17      <AlertDialogTrigger>Revert theme</AlertDialogTrigger>18      <AlertDialogContent size="sm">19        <AlertDialogHeader>20          <AlertDialogMedia>21            <WarningIcon />22          </AlertDialogMedia>23          <AlertDialogTitle>Revert theme tokens?</AlertDialogTitle>24          <AlertDialogDescription>25            Custom CSS variables snap back to the starter defaults.26          </AlertDialogDescription>27        </AlertDialogHeader>28        <AlertDialogFooter>29          <AlertDialogCancel>Cancel</AlertDialogCancel>30          <AlertDialogAction>Revert</AlertDialogAction>31        </AlertDialogFooter>32      </AlertDialogContent>33    </AlertDialog>34  )35}

With image

AlertDialogMedia can span the full width to place a preview image above the copy.

tsx

1import {2  AlertDialog,3  AlertDialogAction,4  AlertDialogCancel,5  AlertDialogContent,6  AlertDialogDescription,7  AlertDialogFooter,8  AlertDialogHeader,9  AlertDialogMedia,10  AlertDialogTitle,11  AlertDialogTrigger,12} from "@/components/ui/alert-dialog"1314export function Example() {15  return (16    <AlertDialog>17      <AlertDialogTrigger>Open preview</AlertDialogTrigger>18      <AlertDialogContent>19        <AlertDialogHeader>20          <AlertDialogMedia className="col-span-full mb-3 h-44 w-full overflow-hidden rounded-sm p-0 sm:h-52">21            <img22              src="/assets/brand/demos/alert-dialog-preview.png"23              alt=""24            />25          </AlertDialogMedia>26          <AlertDialogTitle className="!col-start-1">27            Open staged preview?28          </AlertDialogTitle>29          <AlertDialogDescription className="!col-start-1">30            Share a temporary build of the docs. The link expires after seven31            days.32          </AlertDialogDescription>33        </AlertDialogHeader>34        <AlertDialogFooter>35          <AlertDialogCancel>Close</AlertDialogCancel>36          <AlertDialogAction>Open</AlertDialogAction>37        </AlertDialogFooter>38      </AlertDialogContent>39    </AlertDialog>40  )41}

Delete confirm

A destructive confirmation with a clear icon and action.

tsx

1import {2  AlertDialog,3  AlertDialogAction,4  AlertDialogCancel,5  AlertDialogContent,6  AlertDialogDescription,7  AlertDialogFooter,8  AlertDialogHeader,9  AlertDialogMedia,10  AlertDialogTitle,11  AlertDialogTrigger,12} from "@/components/ui/alert-dialog"1314export function Example() {15  return (16    <AlertDialog>17      <AlertDialogTrigger variant="destructive">18        Delete demo19      </AlertDialogTrigger>20      <AlertDialogContent>21        <AlertDialogHeader>22          <AlertDialogMedia className="bg-destructive/10 text-destructive">23            <TrashIcon />24          </AlertDialogMedia>25          <AlertDialogTitle>Delete this demo scene?</AlertDialogTitle>26          <AlertDialogDescription>27            The preview and its code sample leave the docs page. You can add28            the scene again later from the registry.29          </AlertDialogDescription>30        </AlertDialogHeader>31        <AlertDialogFooter>32          <AlertDialogCancel>Cancel</AlertDialogCancel>33          <AlertDialogAction variant="destructive">Delete</AlertDialogAction>34        </AlertDialogFooter>35      </AlertDialogContent>36    </AlertDialog>37  )38}

Type to confirm

Require the user to enter matching text before enabling a destructive action.

tsx

1import { useState } from "react"2import {3  AlertDialog,4  AlertDialogAction,5  AlertDialogCancel,6  AlertDialogContent,7  AlertDialogDescription,8  AlertDialogFooter,9  AlertDialogHeader,10  AlertDialogTitle,11  AlertDialogTrigger,12} from "@/components/ui/alert-dialog"1314const CONFIRM_TEXT = "drop-namespace"1516export function Example() {17  const [value, setValue] = useState("")1819  return (20    <AlertDialog21      onOpenChange={(open) => {22        if (!open) setValue("")23      }}24    >25      <AlertDialogTrigger variant="destructive">26        Drop namespace27      </AlertDialogTrigger>28      <AlertDialogContent>29        <AlertDialogHeader>30          <AlertDialogTitle>Drop @arctis permanently?</AlertDialogTitle>31          <AlertDialogDescription>32            Installs that point at this namespace will fail. Type{" "}33            <span className="font-medium text-foreground">{CONFIRM_TEXT}</span>{" "}34            to continue.35          </AlertDialogDescription>36        </AlertDialogHeader>37        <input38          value={value}39          onChange={(event) => setValue(event.target.value)}40          placeholder={CONFIRM_TEXT}41          className="mt-4 w-full rounded-sm border border-input bg-background px-3 py-2 text-sm outline-none"42        />43        <AlertDialogFooter>44          <AlertDialogCancel>Cancel</AlertDialogCancel>45          <AlertDialogAction46            variant="destructive"47            disabled={value !== CONFIRM_TEXT}48          >49            Drop50          </AlertDialogAction>51        </AlertDialogFooter>52      </AlertDialogContent>53    </AlertDialog>54  )55}

API Reference

AlertDialog

Prop	Type	Default
open	boolean	—
defaultOpen	boolean	false
onOpenChange	(open: boolean) => void	—

1<AlertDialog>2  <AlertDialogTrigger variant="outline">Open</AlertDialogTrigger>3  <AlertDialogContent>4    <AlertDialogTitle>Are you sure?</AlertDialogTitle>5    <AlertDialogDescription>This cannot be undone.</AlertDialogDescription>6    <AlertDialogCancel>Cancel</AlertDialogCancel>7    <AlertDialogAction>Continue</AlertDialogAction>8  </AlertDialogContent>9</AlertDialog>

AlertDialogTrigger

Renders a Button and accepts the same props, including variant, size, and loading.

Prop	Type	Default
variant	Button variant	"default"
size	Button size	"sm"
className	string	—

1<AlertDialogTrigger variant="outline">Open</AlertDialogTrigger>

AlertDialogContent

Prop	Type	Default
size	"default" \| "sm"	"default"
variant	"default" \| "outline"	"default"
className	string	—

1<AlertDialogContent>2  <AlertDialogTitle>Are you sure?</AlertDialogTitle>3  <AlertDialogDescription>This cannot be undone.</AlertDialogDescription>4</AlertDialogContent>

AlertDialogMedia

Prop	Type	Default
className	string	—

1<AlertDialogMedia>2  <Icon />3</AlertDialogMedia>

AlertDialogTitle

Prop	Type	Default
className	string	—

1<AlertDialogTitle>Are you sure?</AlertDialogTitle>

AlertDialogDescription

Prop	Type	Default
className	string	—

1<AlertDialogDescription>2  This cannot be undone.3</AlertDialogDescription>

AlertDialogCancel

Prop	Type	Default
className	string	—

1<AlertDialogCancel>Cancel</AlertDialogCancel>

AlertDialogAction

Prop	Type	Default
variant	"default" \| "destructive"	"default"
className	string	—
disabled	boolean	false

1<AlertDialogAction>Continue</AlertDialogAction>