Dialog

React Dialog component

Responsive React Dialog built with Bootstrap 5. Examples of dialog box UI for confirm & reject dialog popups, alert dialogs & more.

Dialog is a mobile-friendly popup for showing additional content, alerts, confirmation prompts etc.

Basic dialog window

Click the button to launch the dialog. For more advanced examples & customization make sure to check out the main Modal docs. 

        
            
        import React, { useState } from "react";
        import {
          MDBBtn,
          MDBModal,
          MDBModalDialog,
          MDBModalContent,
          MDBModalHeader,
          MDBModalTitle,
          MDBModalBody,
          MDBModalFooter,
          MDBContainer,
        } from "mdb-react-ui-kit";
        
        export default function App() {
          const [basicModal, setBasicModal] = useState(false);
        
          const toggleShow = () => setBasicModal(!basicModal);
        
          return (
            <>
              <MDBBtn onClick={toggleShow}>LAUNCH DEMO DIALOG</MDBBtn>
              <MDBModal show={basicModal} setShow={setBasicModal} tabIndex="-1">
                <MDBModalDialog>
                  <MDBModalContent>
                    <MDBModalHeader>
                      <MDBModalTitle>Modal title</MDBModalTitle>
                      <MDBBtn
                        className="btn-close"
                        color="none"
                        onClick={toggleShow}
                      ></MDBBtn>
                    </MDBModalHeader>
                    <MDBModalBody>...</MDBModalBody>
      
                    <MDBModalFooter>
                      <MDBBtn color="secondary" onClick={toggleShow}>
                        Close
                      </MDBBtn>
                      <MDBBtn>Save changes</MDBBtn>
                    </MDBModalFooter>
                  </MDBModalContent>
                </MDBModalDialog>
              </MDBModal>
            </>
          );
        }