Success Dialogue

A dialog that confirms to the user that an action has been completed.

import { Button } from "@/components/ui/button"
import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription } from "@/components/ui/dialog"
import { CircleCheck } from "lucide-react"

<Dialog>
  <DialogTrigger asChild>
    <Button variant="outline">Open Success Dialogue</Button>
  </DialogTrigger>
  <DialogContent className="sm:max-w-[450px]">
    <div className="flex flex-col items-start gap-4">
      <CircleCheck className="h-12 w-12 text-success" strokeWidth={1.5} />
      <DialogHeader>
        <DialogTitle>Success!</DialogTitle>
        <DialogDescription>
          Your action was completed successfully. You're good to go.
        </DialogDescription>
      </DialogHeader>
    </div>
    <DialogFooter className="mt-4">
      <Button rounded="full" size="sm" className="uppercase text-xs tracking-wider font-bold px-6">
        Dismiss
      </Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

API Reference

This component is a composition of the Dialog primitive with success-specific content:

Element	Component	Purpose
Root	Dialog	Controls open/close state
Trigger	DialogTrigger	Element that opens the dialog
Content	DialogContent	Overlay container with focus trapping and close button
Icon	CircleCheck (lucide-react)	Visual success indicator
Title	DialogTitle	Success heading
Description	DialogDescription	Confirmation message body
Action	Button	Dismiss action to close the dialogue

Accessibility

Built on Radix Dialog, this component inherits full WAI-ARIA dialog behavior:

• Focus is trapped within the dialog while open
• Escape key closes the dialog
• Click outside closes the dialog
• Content underneath is made inert
• Focus returns to trigger when closed
• DialogTitle and DialogDescription provide accessible labeling via aria-labelledby and aria-describedby