UnsavedChangesModal

The UnsavedChangesModal component from Superset's UI library.

Live Example

Loading component...

Try It

Edit the code below to experiment with the component:

Live Editor

function Demo() {
  const [show, setShow] = React.useState(false);
  return (
    <div>
      <Button onClick={() => setShow(true)}>
        Navigate Away (Unsaved Changes)
      </Button>
      <UnsavedChangesModal
        showModal={show}
        onHide={() => setShow(false)}
        handleSave={() => {
          alert('Saved!');
          setShow(false);
        }}
        onConfirmNavigation={() => {
          alert('Discarded changes');
          setShow(false);
        }}
        title="Unsaved Changes"
      >
        If you don&apos;t save, changes will be lost.
      </UnsavedChangesModal>
    </div>
  );
}

Result

Loading...

Custom Title

Live Editor

function CustomTitle() {
  const [show, setShow] = React.useState(false);
  return (
    <div>
      <Button onClick={() => setShow(true)}>Close Without Saving</Button>
      <UnsavedChangesModal
        showModal={show}
        onHide={() => setShow(false)}
        handleSave={() => setShow(false)}
        onConfirmNavigation={() => setShow(false)}
        title="You have unsaved dashboard changes"
      >
        Your dashboard layout and filter changes have not been saved. Do you
        want to save before leaving?
      </UnsavedChangesModal>
    </div>
  );
}

Result

Loading...

Props

Prop	Type	Default	Description
showModal	boolean	false	Whether the modal is visible.
title	string	"Unsaved Changes"	Title text displayed in the modal header.

Import

import { UnsavedChangesModal } from '@superset-ui/core/components';

---

Improve this page

This documentation is auto-generated from the component's Storybook story. Help improve it by editing the story file.