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

Modal

Modal dialog component for displaying content that requires user attention or interaction. Supports customizable buttons, drag/resize, and confirmation dialogs.

Live Example

<StoryWithControls component="Modal" props={{ disablePrimaryButton: false, primaryButtonName: "Submit", primaryButtonStyle: "primary", show: false, title: "I'm a modal!", resizable: false, draggable: false, width: 500 }} controls={[ { name: "disablePrimaryButton", label: "Disable Primary Button", type: "boolean", description: "Whether the primary button is disabled." }, { name: "primaryButtonName", label: "Primary Button Name", type: "text", description: "Text for the primary action button." }, { name: "primaryButtonStyle", label: "Primary Button Style", type: "select", options: [ "primary", "secondary", "dashed", "danger", "link" ], description: "The style of the primary action button." }, { name: "show", label: "Show", type: "boolean", description: "Whether the modal is visible. Use the "Try It" example below for a working demo." }, { name: "title", label: "Title", type: "text", description: "Title displayed in the modal header." }, { name: "resizable", label: "Resizable", type: "boolean", description: "Whether the modal can be resized by dragging corners." }, { name: "draggable", label: "Draggable", type: "boolean", description: "Whether the modal can be dragged by its header." }, { name: "width", label: "Width", type: "number", description: "Width of the modal in pixels." } ]} triggerProp="show" onHideProp="onHide" />

Try It

Edit the code below to experiment with the component:

function ModalDemo() {
  const [isOpen, setIsOpen] = React.useState(false);
  return (
    <>
      <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
      <Modal
        show={isOpen}
        onHide={() => setIsOpen(false)}
        title="Example Modal"
        primaryButtonName="Submit"
        onHandledPrimaryAction={() => {
          alert('Submitted!');
          setIsOpen(false);
        }}
      >
        <p>This is the modal content. Click Submit or close the modal.</p>
      </Modal>
    </>
  );
}

Danger Modal

function DangerModal() {
  const [isOpen, setIsOpen] = React.useState(false);
  return (
    <>
      <Button buttonStyle="danger" onClick={() => setIsOpen(true)}>Delete Item</Button>
      <Modal
        show={isOpen}
        onHide={() => setIsOpen(false)}
        title="Confirm Delete"
        primaryButtonName="Delete"
        primaryButtonStyle="danger"
        onHandledPrimaryAction={() => {
          alert('Deleted!');
          setIsOpen(false);
        }}
      >
        <p>Are you sure you want to delete this item? This action cannot be undone.</p>
      </Modal>
    </>
  );
}

Confirmation Dialogs

function ConfirmationDialogs() {
  return (
    <div style={{ display: 'flex', gap: 8 }}>
      <Button onClick={() => Modal.confirm({
        title: 'Confirm Action',
        content: 'Are you sure you want to proceed?',
        okText: 'Yes',
      })}>Confirm</Button>
      <Button onClick={() => Modal.warning({
        title: 'Warning',
        content: 'This action may have consequences.',
      })}>Warning</Button>
      <Button onClick={() => Modal.error({
        title: 'Error',
        content: 'Something went wrong.',
      })}>Error</Button>
    </div>
  );
}

Props

Import

import { Modal } 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. :::