Spaces:
Paused
Paused
| title: Modal | |
| sidebar_label: Modal | |
| <!-- | |
| Licensed to the Apache Software Foundation (ASF) under one | |
| or more contributor license agreements. See the NOTICE file | |
| distributed with this work for additional information | |
| regarding copyright ownership. The ASF licenses this file | |
| to you under the Apache License, Version 2.0 (the | |
| "License"); you may not use this file except in compliance | |
| with the License. You may obtain a copy of the License at | |
| http://www.apache.org/licenses/LICENSE-2.0 | |
| Unless required by applicable law or agreed to in writing, | |
| software distributed under the License is distributed on an | |
| "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY | |
| KIND, either express or implied. See the License for the | |
| specific language governing permissions and limitations | |
| under the License. | |
| --> | |
| 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: | |
| ```tsx live | |
| 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 | |
| ```tsx live | |
| 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 | |
| ```tsx live | |
| 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 | |
| | 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 | |
| ```tsx | |
| import { Modal } from '@superset-ui/core/components'; | |
| ``` | |
| :::tip[Improve this page] | |
| This documentation is auto-generated from the component's Storybook story. | |
| Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Modal/Modal.stories.tsx). | |
| ::: | |