Message Pop Up

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

Usage & Examples

Default

default.tsx
<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 API

28 props
Columns
Message Pop Up props API
Default
Description
actionsClassNamestringNopropsAdditional class names for the actions wrapper.
aria-describedbystringNoariaOptional ID of an external element that describes the dialog. Useful when the popup description should point to custom content.
aria-labelstringNoariaAccessible label for the dialog when no visible title is available. Prefer this when the popup does not render a heading.
aria-label-close-buttonstringNoaria"Close popup"Accessible label for the close button. Defaults to "Close popup".
aria-labelledbystringNoariaOptional ID of an external element that labels the dialog. Overrides the internally generated label association when provided.
aria-live"off" | "polite" | "assertive"NoariaOptional aria-live politeness setting for announcing popup content. Only use when the popup message should be announced dynamically.
bodyClassNamestringNopropsAdditional class names for the body section.
cancelButtonClassNamestringNopropsAdditional class names for the cancel button.
cancelTextstringNoprops"Cancel"Optional text for the cancel button (default: "Cancel").
classNamestringNostylingOptional additional class names for custom styling.
closeButtonClassNamestringNopropsAdditional class names for the close button.
confirmButtonClassNamestringNopropsAdditional class names for the confirm button.