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

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

Try It

Edit the code below to experiment with the component:

tsx

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

With Custom Trigger

tsx

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

Draggable & Resizable

tsx

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

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

tsx

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