Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Confirmation with Detailed Description Alert Dialog for Ark UI

A transfer-ownership confirmation that lists four consequences, from losing admin access to notifying the team.

The title is Transfer Ownership. Four bullets say you lose admin access, the new owner gets control, billing changes, and the team is notified. Transfer does not run.

List the consequences when one sentence hides the cost. A multi-step handoff belongs in a Dialog. In React, Ark UI does not transfer the project.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Alert Dialog anatomy: content, title, description, cancel, action

Usage

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="outline">Open Dialog</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Transfer Ownership</AlertDialogTitle>
      <AlertDialogDescription>
        You are about to transfer ownership of this project to another user.
        This will:
      </AlertDialogDescription>
    </AlertDialogHeader>
    <ul className="ms-4 flex list-disc flex-col gap-1 text-muted-foreground text-sm">
      {consequences.map((consequence) => (
        <li key={consequence}>{consequence}</li>
      ))}
    </ul>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogClose asChild>
        <AlertDialogAction>Transfer</AlertDialogAction>
      </AlertDialogClose>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

FAQ

Where does the list go?

Right after AlertDialogHeader, as a ul with list-disc, ms-4 and text-muted-foreground. AlertDialogDescription holds the lead-in sentence, which keeps the description short when it's announced.

How many consequences should I list?

Three to five short items. Past that people skim, and the list stops doing its job. If there's more to say, link to documentation instead.

How should I phrase each item?

Start each with a verb in the same form: Remove your admin access, Grant full control, Update billing information. Parallel, short items are faster to scan than sentences.

How are the items rendered?

They're a static array at module scope, mapped to li elements keyed by their text. Replace it with the real consequences of your action, or build the list from props.

Does this fit on small screens?

Keep it to a few short items. The dialog is sized for the viewport, and a confirmation people have to scroll through is one they read less carefully.

Should each item get an icon?

Usually not. Bullets already separate the items, and icons on every line slow scanning. Save one icon for the title if the dialog needs emphasis.

API Reference

Alert Dialog

Sets asChild. The rest is on the Alert Dialog page.

Button

Sets variant="outline". The rest is on the Button page.

All 39 alert dialog examples