Variable ModalConst

Type Declaration

• • (props: DialogPropsExtend): Element

  • Material-UI Dialog-based Modal component with header, content, and footer sections.

    Wraps Material-UI's Dialog to provide enhanced modal dialog with configurable header (title + actions), content area, and footer (actions). Supports fade animation, custom closing behavior, and flexible content rendering (HTML strings or JSX). All Material-UI Dialog props are supported and passed through directly.

    Parameters

    • props: DialogPropsExtend

      Modal configuration (see DialogPropsExtend interface)

    Returns Element

    Modal component with structured header, content, and footer layout

    Example

    // Basic usage
    <Modal
      modalId="basic-modal"
      open={isOpen}
      title="Modal Title"
      contentModal={<div>Modal content</div>}
    />
    
    // With custom header and footer actions
    <Modal
      modalId="custom-modal"
      modalProps={{
        header: {
          title: "Custom Header",
          actions: [{ actionId: "close", content: <CloseButton /> }]
        },
        content: "Modal content",
        footer: {
          actions: [
            { actionId: "cancel", content: <Button>Cancel</Button> },
            { actionId: "save", content: <Button>Save</Button> }
          ]
        }
      }}
      open={isOpen}
    />
    
    // With custom styling
    <Modal
      modalId="styled-modal"
      className="custom-modal"
      contentClassName="modal-content"
      open={isOpen}
      title="Styled Modal"
    />
    Copy

    See

    https://mui.com/material-ui/react-dialog/