Skip to content

ConfirmationDialog Component

Description

The ConfirmationDialog component provides a standard confirmation popup with customizable actions.

Props

Prop Type Default Description
open boolean false Controls whether the dialog is visible.
title string "" The title of the confirmation dialog.
content string "" The content message of the dialog.
onClose () => void undefined Callback function when the dialog is closed.
onAccept () => void undefined Callback function when the "Yes" button is clicked.
onDecline () => void undefined Callback function when the "No" button is clicked.

Example Usage

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import { ConfirmationDialog, Button } from "@nomana-it/liberty-core"
import { useState } from "react";

export const ConfirmationDialogExample = () => {
  const [open, setOpen] = useState(false);

  return (
    <div>
      <Button onClick={() => setOpen(true)}>Open Confirmation Dialog</Button>
      <ConfirmationDialog
        open={open}
        title="Confirm Action"
        content="Are you sure you want to proceed?"
        onClose={() => setOpen(false)}
        onAccept={() => {
          alert("Accepted");
          setOpen(false);
        }}
        onDecline={() => {
          alert("Declined");
          setOpen(false);
        }}
      />
    </div>
  );
};

🔗 GitHub Repository (Core): Liberty Core
🔗 GitHub Repository (Test Project): Liberty Test
📖 Live Documentation: Liberty Core Docs
💖 Sponsor & Support: Sponsor Liberty Core