Alert Dialog

Explicit destructive confirmation dialog requiring intentional user action. Built on Radix AlertDialog primitive without outside-click dismissal.

// Radix — @radix-ui/react-alert-dialog
import { AlertDialog } from "@shavin/ui";

Standard Layout Intents

Intent Alerts Trigger Group

Component Source

import { AlertDialog, Button } from "@shavin/ui";

{/* 1. Default alert */}
<AlertDialog
  open={defaultOpen}
  onOpenChange={setDefaultOpen}
  title="Sign out?"
  description="You'll need to sign in again to access your account."
  confirmLabel="Sign out"
  onConfirm={() => setDefaultOpen(false)}
/>

{/* 2. Destructive alert */}
<AlertDialog
  open={destructiveOpen}
  onOpenChange={setDestructiveOpen}
  title="Delete permanently?"
  description="This item will be deleted forever."
  intent="danger"
  confirmLabel="Delete"
  onConfirm={() => setDestructiveOpen(false)}
/>

Centered Status Layouts

Subscription Expiring Alert

Component Source

<AlertDialog
  open={open}
  onOpenChange={setOpen}
  layout="centered"
  intent="danger"
  icon={<Bell className="h-6 w-6" />}
  title="Subscription Expiring Soon"
  badgeText="Expires in 2 days"
  description="Your current plan will expire in 2 days. Update your payment method now to ensure uninterrupted access to your Pro features."
  confirmLabel="Update Payment"
  cancelLabel="Remind Me Later"
  onConfirm={() => setOpen(false)}
/>

System Update Available Alert

Component Source

<AlertDialog
  open={open}
  onOpenChange={setOpen}
  layout="centered"
  intent="info"
  icon={<ShieldAlert className="h-6 w-6" />}
  title="System Update Available!"
  badgeText="Release v28.1.0 (2026-01-12)"
  description="A new version of the application is ready. Restarting now will apply the latest security patches and features."
  confirmLabel="Update Now"
  cancelLabel="Remind Me Later"
  onConfirm={() => setOpen(false)}
/>

Props

Prop	Type	Default	Description
open*	boolean	—	Whether alert dialog is open.
onOpenChange*	(open: boolean) => void	—	Callback fired when open state changes.
title*	string	—	Title of the alert dialog.
description	ReactNode	—	Optional body description element.
confirmLabel	string	Confirm	Confirm action button label. Default 'Confirm'.
cancelLabel	string	Cancel	Cancel action button label. Default 'Cancel'.
onConfirm*	() => void	—	Callback fired when user clicks confirm button.
danger	boolean	—	Styles confirm action as danger. Deprecated: use intent='danger'.
intent	"info" \| "warning" \| "success" \| "danger" \| "default"	—	Visual intent/tone: info, warning, success, danger, default.
layout	"default" \| "centered"	(left-aligned)	Layout alignment: default (left-aligned) or centered.
badgeText	string	—	Optional badge text below title.
icon	ReactNode	—	Optional custom icon element override.
children	ReactNode	—	Children element slot.

* required