ModalTrigger

A component that renders a trigger element which opens a modal when clicked. Useful for actions that need confirmation or additional input.

Live Example

Loading component...

Try It

Edit the code below to experiment with the component:

Live Editor

function Demo() {
  return (
    <ModalTrigger
      isButton
      triggerNode={<span>Click to Open</span>}
      modalTitle="Example Modal"
      modalBody={<p>This is the modal content. You can put any React elements here.</p>}
      width="500px"
      responsive
    />
  );
}

Result

Loading...

With Custom Trigger

Live Editor

function CustomTrigger() {
  return (
    <ModalTrigger
      triggerNode={
        <Button buttonStyle="primary">
          <Icons.PlusOutlined /> Add New Item
        </Button>
      }
      modalTitle="Add New Item"
      modalBody={
        <div>
          <p>Fill out the form to add a new item.</p>
          <Input placeholder="Item name" />
        </div>
      }
      width="400px"
    />
  );
}

Result

Loading...

Draggable & Resizable

Live Editor

function DraggableModal() {
  return (
    <ModalTrigger
      isButton
      triggerNode={<span>Open Draggable Modal</span>}
      modalTitle="Draggable & Resizable"
      modalBody={<p>Try dragging the header or resizing from the corners!</p>}
      draggable
      resizable
      width="500px"
    />
  );
}

Result

Loading...

Props

Prop	Type	Default	Description
isButton	boolean	true	Whether to wrap the trigger in a button element.
modalTitle	string	"Modal Title"	Title displayed in the modal header.
modalBody	string	"This is the modal body content."	Content displayed in the modal body.
tooltip	string	"Click to open modal"	Tooltip text shown on hover over the trigger.
width	string	"600px"	Width of the modal (e.g., "600px", "80%").
maxWidth	string	"1000px"	Maximum width of the modal.
responsive	boolean	true	Whether the modal should be responsive.
draggable	boolean	false	Whether the modal can be dragged by its header.
resizable	boolean	false	Whether the modal can be resized by dragging corners.
triggerNode	string	"Click to Open Modal"	The clickable element that opens the modal when clicked.

Import

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