Message Pop Up

The Message Pop Up component renders a message popup with options for confirmation and cancellation.

Usage

Default

<button onClick={() => setOpen(true)}>Show Popup</button>
{open && (
  <MessagePopUp
    message="Are you sure you want to delete this item?"
    onClose={() => setOpen(false)}
    onConfirm={() => {
      alert("Confirmed!");
      setOpen(false);
    }}
    onCancel={() => {
      alert("Cancelled!");
      setOpen(false);
    }}
  />
)}

Props

Sortable data table
Prop	Type	Default	Description
message	string	-	The main message to display in the popup.
onClose	(event) => void	-	Callback when the popup should close (background/cancel/close).
onConfirm	(event) => void	-	Callback when the confirm action is clicked.
onCancel	(event) => void	-	Callback when the cancel action is clicked.
confirmText	string	"Confirm"	Custom label for the confirm button.
cancelText	string	"Cancel"	Custom label for the cancel button.
rounding	"none" \| "small" \| "medium" \| "large"	Configured Default	Border radius of the popup dialog.
controlsRounding	"none" \| "small" \| "medium" \| "large"	Configured Default	Border radius for the action buttons.
shadow	"none" \| "light" \| "medium" \| "strong" \| "intense"	Configured Default	Shadow style for the popup dialog.
className	string	-	Additional custom CSS class names for the popup.
data-testid	string	"message-popup"	Custom test id for querying in tests.