Modal

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

Live Example

Loading component...

Try It

Edit the code below to experiment with the component:

Live Editor

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

Result

Loading...

Danger Modal

Live Editor

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

Result

Loading...

Confirmation Dialogs

Live Editor

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

Result

Loading...

Props

Prop	Type	Default	Description
disablePrimaryButton	boolean	false	Whether the primary button is disabled.
primaryButtonName	string	"Submit"	Text for the primary action button.
primaryButtonStyle	string	"primary"	The style of the primary action button.
show	boolean	false	Whether the modal is visible. Use the "Try It" example below for a working demo.
title	string	"I'm a modal!"	Title displayed in the modal header.
resizable	boolean	false	Whether the modal can be resized by dragging corners.
draggable	boolean	false	Whether the modal can be dragged by its header.
width	number	500	Width of the modal in pixels.

Import

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

---

Improve this page

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