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

27 props
Columns
Message Pop Up props API
Default
Description
actionsClassNamestringNopropsAdditional class name applied to the actions element.
aria-describedbystringNoariaID of an element that describes the dialog.
aria-labelstringNoariaAccessible label for the dialog.
aria-label-close-buttonstringNoaria"Close"Accessible label for the close button.
aria-labelledbystringNoariaID of an element that labels the dialog.
aria-live"off" | "polite" | "assertive"Noariaaria-live value applied to the message element.
bodyClassNamestringNopropsAdditional class name applied to the body element.
cancelButtonClassNamestringNopropsAdditional class name applied to the cancel button.
cancelTextstringNoprops"Cancel"Text for the cancel button.
classNamestringNostylingAdditional class name applied to the wrapper element.
closeButtonClassNamestringNopropsAdditional class name applied to the close button.
confirmButtonClassNamestringNopropsAdditional class name applied to the confirm button.