AlertDialog

Alert dialog.

Use AlertDialog to interrupt for confirmation of a destructive or important action.

import {
	AlertDialog,
	AlertDialogTrigger,
	AlertDialogContent,
	AlertDialogTitle,
	AlertDialogDescription,

Registry install

pnpm dlx shadcn@latest add @tile-ui/alert-dialog

Package usage

import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogTitle, AlertDialogDescription, AlertDialogCancel, AlertDialogAction } from '@tile-ui/react';
 
<AlertDialog>
	<AlertDialogTrigger>Delete</AlertDialogTrigger>
	<AlertDialogContent>
		<AlertDialogTitle>Are you sure?</AlertDialogTitle>
		<AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
		<AlertDialogCancel>Cancel</AlertDialogCancel>
		<AlertDialogAction>Delete</AlertDialogAction>
	</AlertDialogContent>
</AlertDialog>

Highlights

  • Action and cancel buttons
  • Overlay and content
  • Two sizes

Registry dependencies

ItemPurpose
alert-dialogComponent source and module styles
coreFramework-agnostic logic helpers
stylesShared SCSS tokens and globals

API reference

AlertDialog

No custom props.