import { StoryWithControls } from '../../../src/components/StorybookWrapper';

UnsavedChangesModal

The UnsavedChangesModal component from Superset's UI library.

Live Example

Try It

Edit the code below to experiment with the component:

tsx

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>
  );
}

Custom Title

tsx

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>
  );
}

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

tsx

import { UnsavedChangesModal } from '@superset/components';

:::tip[Improve this page] This documentation is auto-generated from the component's Storybook story. Help improve it by editing the story file. :::