sigilUI

Alert Dialog

Ask for confirmation before an action that needs extra care.

@sigil-ui/componentsReact

Preview

Live preview Interactive

Import

import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel } from "@sigil-ui/components";

Usage

<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>Delete</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Sub-components

This component includes the following parts:

  • <AlertDialogTrigger>
  • <AlertDialogContent>
  • <AlertDialogHeader>
  • <AlertDialogFooter>
  • <AlertDialogTitle>
  • <AlertDialogDescription>
  • <AlertDialogAction>
  • <AlertDialogCancel>

Token integration

CSS VariablePurpose
--s-overlay-bgOverlay bg
--s-overlay-blurOverlay blur
--s-duration-fastDuration fast
--s-overlay-paddingOverlay padding
--s-overlay-radiusOverlay radius
--s-radius-lgRadius lg
--s-overlay-surfaceOverlay surface
--s-surfaceSurface
--s-border-styleBorder style
--s-overlay-borderOverlay border
--s-borderBorder
--s-overlay-shadowOverlay shadow