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). | |
| ::: | |