AlertDialog

Modal dialog that interrupts the user with important content and expects a response. Built on Radix UI.

Installation

# Install @opencosmos/ui to use AlertDialog
pnpm add @opencosmos/ui

Preview

Loading preview...

Usage

Import

import { AlertDialog } from '@opencosmos/ui';

Example

<AlertDialog>
  Content
</AlertDialog>

Eject

Copy this component into your project for full customization

Code Examples

Confirmation Dialog

Confirmation dialog for destructive actions

import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@opencosmos/ui"

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="destructive">Delete</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you sure?</AlertDialogTitle>
      <AlertDialogDescription>
        This action cannot be undone.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Continue</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>