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

Data table
	Type	Description
aria-describedby	string	Optional ID of an external element that describes the dialog. Useful when the popup description should point to custom content.
aria-label	string	Accessible label for the dialog when no visible title is available. Prefer this when the popup does not render a heading.
aria-label-close-button	string	Accessible label for the close button. Defaults to "Close popup".
aria-labelledby	string	Optional ID of an external element that labels the dialog. Overrides the internally generated label association when provided.
aria-live	"off" \| "polite" \| "assertive"	Optional aria-live politeness setting for announcing popup content. Only use when the popup message should be announced dynamically.
cancelText	string	Optional text for the cancel button (default: "Cancel").
className	string	Optional additional class names for custom styling.
confirmText	string	Optional text for the confirm button (default: "Confirm").
controlsRounding	RoundingType	Optional rounding for controls in the message popup. One of: "none" \| "small" \| "medium" \| "large" \| "full"
data-testid	string	Optional test ID for targeting the component during testing.
dialogRole	"alertdialog" \| "dialog"	Optional role for the popup container. Defaults to "dialog". Use "alertdialog" for urgent confirmations.
message	string	Message text to be displayed within the popup dialog.
onCancel	(() => void)	Optional callback when the user cancels the action.
onClose	() => void	Callback function to execute when the popup is closed.
onConfirm	(() => void)	Optional callback when the user confirms the message.
rounding	RoundingType	Optional rounding for the message popup. One of: "none" \| "small" \| "medium" \| "large" \| "full"
shadow	ShadowType	Optional shadow for the message popup. One of: "none" \| "light" \| "medium" \| "strong" \| "intense"
title	ReactNode	Optional title shown in a top bar. If provided, a header section is rendered above the message.