Popconfirm

React Bootstrap 5 Popconfirm component

Responsive popconfirm built with the latest Bootstrap 5. Popconfirm is a compact dialog alert. Use it to confirm/cancel a decision or display extra content like an explanation.

Popconfirm basically is a simple alert with confirmation buttons.

Note: Read the API tab to find all available options and advanced customization

Basic example

Basic example of popconfirm usage

        
            
          import React, { useState } from 'react';
          import { 
            MDBPopconfirm, 
            MDBPopconfirmMessage, 
          } from 'mdb-react-ui-kit';
  
          export default function App() {
            return (
              <MDBPopconfirm placement='bottom' btnChildren='DEFAULT'>
                <MDBPopconfirmMessage>This is example</MDBPopconfirmMessage>
              </MDBPopconfirm>
            );
          }

Controlled open state

You can control open state of popconfirm by passing open property. Use onClick and onClose to handle state changes. 

        
            
            import React, { useState } from 'react';
            import { MDBPopconfirm, MDBPopconfirmMessage } from 'mdb-react-ui-kit';

            export default function App() {
              const [isOpen, setIsOpen] = useState(false);

              return (
                <MDBPopconfirm
                  open={isOpen}
                  onClick={() => setIsOpen(true)}
                  onClose={() => setIsOpen(false)}
                  placement='bottom'
                  btnChildren='DEFAULT'
                >
                  <MDBPopconfirmMessage>This is example</MDBPopconfirmMessage>
                </MDBPopconfirm>
              );
            }

Display mode

You can choose between modal and inline to modify display mode.

Modal mode is rendered at the center of the screen and is static, you can't change its position but all other attributes can be applied 

        
            
          import React, { useState } from 'react';
          import { 
            MDBPopconfirm, 
            MDBPopconfirmMessage, 
          } from 'mdb-react-ui-kit';
  
          export default function App() {
            return (
              <>
                <MDBPopconfirm modal btnChildren='MODAL'>
                  <MDBPopconfirmMessage>Are you sure?</MDBPopconfirmMessage>
                </MDBPopconfirm>
                <MDBPopconfirm placement='bottom' btnChildren='INLINE'>
                  <MDBPopconfirmMessage>Are you sure?</MDBPopconfirmMessage>
                </MDBPopconfirm>
              </>
            );
          }

Icon example

To apply icon to message use property icon like on example below: 

        
            
          import React, { useState } from 'react';
          import { 
            MDBPopconfirm, 
            MDBPopconfirmMessage, 
            MDBIcon
          } from 'mdb-react-ui-kit';
  
          export default function App() {
            return (
              <MDBPopconfirm placement='bottom' btnChildren='ICON'>
                <MDBPopconfirmMessage icon={<MDBIcon icon='comment' />}> Icon example</MDBPopconfirmMessage>
              </MDBPopconfirm>
            );
          }

Inline positions

You can choose between different positions

Available positions: top-end; top; top-start; right-start; right; right-end; bottom-end; bottom; bottom -start; left-end; left; left-start; 

        
            
          import React, { useState } from 'react';
          import { 
            MDBPopconfirm, 
            MDBPopconfirmMessage, 
            MDBRow,
            MDBCol
          } from 'mdb-react-ui-kit';
  
          export default function App() {
            return (
              <MDBRow className="row-cols-md-1 d-flex justify-content-center">
                <MDBCol md="3"></MDBCol>
                <MDBCol md="6" className='d-flex justify-content-center mb-1'>
                  <MDBPopconfirm btnClassName='me-1' placement='top-end' btnChildren='TOP LEFT'>
                    <MDBPopconfirmMessage>Are you sure?</MDBPopconfirmMessage>
                  </MDBPopconfirm>
                  <MDBPopconfirm btnClassName='me-1' placement='top' btnChildren='TOP'>
                    <MDBPopconfirmMessage>Are you sure?</MDBPopconfirmMessage>
                  </MDBPopconfirm>
                  <MDBPopconfirm btnClassName='me-1' placement='top-start' btnChildren='TOP RIGHT'>
                    <MDBPopconfirmMessage>Are you sure?</MDBPopconfirmMessage>
                  </MDBPopconfirm>
                </MDBCol>
                <MDBCol md="3"></MDBCol>
                <MDBCol md="3"></MDBCol>
                <MDBCol md="6" className='d-flex mb-1' style={{ justifyContent: 'space-between' }}>
                  <MDBPopconfirm btnClassName='me-1' placement='left-end' btnChildren='LEFT TOP'>
                    <MDBPopconfirmMessage>Are you sure?</MDBPopconfirmMessage>
                  </MDBPopconfirm>
                  <MDBPopconfirm btnClassName='me-1' placement='right-end' btnChildren='RIGHT TOP'>
                    <MDBPopconfirmMessage>Are you sure?</MDBPopconfirmMessage>
                  </MDBPopconfirm>
                </MDBCol>
                <MDBCol md="3"></MDBCol>
                <MDBCol md="3"></MDBCol>
                <MDBCol md="6" className='d-flex mb-1' style={{ justifyContent: 'space-between' }}>
                  <MDBPopconfirm btnClassName='me-1' placement='left' btnChildren='LEFT'>
                    <MDBPopconfirmMessage>Are you sure?</MDBPopconfirmMessage>
                  </MDBPopconfirm>
                  <MDBPopconfirm btnClassName='me-1' placement='right' btnChildren='RIGHT'>
                    <MDBPopconfirmMessage>Are you sure?</MDBPopconfirmMessage>
                  </MDBPopconfirm>
                </MDBCol>
                <MDBCol md="3"></MDBCol>
                <MDBCol md="3"></MDBCol>
                <MDBCol md="6" className='d-flex mb-1' style={{ justifyContent: 'space-between' }}>
                  <MDBPopconfirm btnClassName='me-1' placement='left-start' btnChildren='LEFT BOTTOM'>
                    <MDBPopconfirmMessage>Are you sure?</MDBPopconfirmMessage>
                  </MDBPopconfirm>
                  <MDBPopconfirm btnClassName='me-1' placement='right-start' btnChildren='RIGHT BOTTOM'>
                    <MDBPopconfirmMessage>Are you sure?</MDBPopconfirmMessage>
                  </MDBPopconfirm>
                </MDBCol>
                <MDBCol md="3"></MDBCol>
                <MDBCol md="3"></MDBCol>
                <MDBCol md="5" className='d-flex justify-content-center mb-1'>
                  <MDBPopconfirm btnClassName='me-1' placement='bottom-end' btnChildren='BOTTOM LEFT'>
                    <MDBPopconfirmMessage>Are you sure?</MDBPopconfirmMessage>
                  </MDBPopconfirm>
                  <MDBPopconfirm btnClassName='me-1' placement='bottom' btnChildren='BOTTOM'>
                    <MDBPopconfirmMessage>Are you sure?</MDBPopconfirmMessage>
                  </MDBPopconfirm>
                  <MDBPopconfirm btnClassName='me-1' placement='bottom-start' btnChildren='BOTTOM RIGHT'>
                    <MDBPopconfirmMessage>Are you sure?</MDBPopconfirmMessage>
                  </MDBPopconfirm>
                </MDBCol>
                <MDBCol md="3"></div>
              </MDBRow>
            );
          }

Popconfirm - API

Import

        
            
        import { 
          MDBPopconfirm,
          MDBPopconfirmMessage,
        } from 'mdb-react-ui-kit';

Properties

MDBPopconfirm

Name Type Default Description Example
btnChildren React.ReactNode '' The text placed in the popconfirm button. <MDBPopconfirm btnChildren='popconfirm' >...</MDBPopconfirm>
btnClassName String '' Add custom class to MDBPopconfirm button. <MDBPopconfirm btnClassName='test' >...</MDBPopconfirm>
cancelBtnClasses string '' Add custom class to MDBPopconfirm cancel button. <MDBPopconfirm cancelBtnClasses="class">...</MDBPopconfirm>
cancelBtnText React.ReactNode 'Cancel' The text placed in the popconfirm confirm button. <MDBPopconfirm confirmBtnText='ok' >...</MDBPopconfirm>
confirmBtnClasses string '' Add custom class to MDBPopconfirm confirm button. <MDBPopconfirm confirmBtnClasses="class">...</MDBPopconfirm>
confirmBtnText React.ReactNode 'Ok' The text placed in the popconfirm confirm button. <MDBPopconfirm confirmBtnText='ok' >...</MDBPopconfirm>
modal boolean false Set the display mode to modal. <MDBPopconfirm modal >...</MDBPopconfirm>
open boolean - Controls the component's open state. <MDBPopconfirm open={true} >...</MDBPopconfirm>
placement 'top' | 'auto' | 'auto-start' | 'auto-end' | 'bottom' | 'right' | 'left' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'right-start' | 'right-end' | 'left-start' | 'left-end' 'top' Specify position to display popover. <MDBPopconfirm placement='bottom'>...</MDBPopconfirm>
popperTag string 'div' Define tag of the MDBPopconfirm popper. <MDBPopconfirm popperTag="span">...</MDBPopconfirm>

MDBPopconfirmMessage

Name Type Default Description Example
icon React.ReactNode - Add icon to MDBPopconfirmMessage. <MDBPopconfirmMessage icon={}>...</MDBPopconfirmMessage>
tag string 'p' Define tag of the MDBPopconfirmMessage wrapper. <MDBPopconfirmMessage tag="span">...</MDBPopconfirmMessage>

Events

MDBPopconfirm

Name Type Description
onCancel (event: React.MouseEvent | React.MouseEvent) => void Fires when the popconfirm is closed without confirm button click.
onConfirm (event: React.MouseEvent | React.MouseEvent) => void Fires when the popconfirm is closed using confirm button.
onClose (event: React.MouseEvent | React.MouseEvent) => void Callback fired when the component requests to be closed.

CSS variables

As part of MDB’s evolving CSS variables approach, popconfirm now use local CSS variables on .popconfirm for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

Popconfirm's CSS variables are in different classes which belong to this component. To make it easier to use them, you can find below all of the used CSS variables.

        
            
          // :root
          --#{$prefix}popconfirm-zindex: #{$popconfirm-zindex};
          --#{$prefix}popconfirm-border-radius: #{$popconfirm-border-radius};

          // .popconfirm
          --#{$prefix}popconfirm-padding: #{$popconfirm-padding};
          --#{$prefix}popconfirm-background-color: #{$popconfirm-background-color};

          // .popconfirm-popover
          --#{$prefix}popconfirm-popover-width: #{$popconfirm-popover-width};
          --#{$prefix}popconfirm-border: #{$popconfirm-border};
            
          // .popconfirm-modal
          --#{$prefix}popconfirm-modal-width: #{$popconfirm-modal-width};
            
          // .popconfirm-buttons-container
          --#{$prefix}popconfirm-buttons-container-btn-ml: #{$popconfirm-buttons-container-btn-ml};
              
          // .popconfirm-backdrop
          --#{$prefix}popconfirm-backdrop-zindex: #{$popconfirm-backdrop-zindex};
          --#{$prefix}popconfirm-backdrop-background-color: #{$popconfirm-backdrop-background-color};

SCSS variables

        
            
        $popconfirm-zindex: 1080;
        $popconfirm-backdrop-zindex: 1070;

        $popconfirm-padding: 1rem;
        $popconfirm-background-color: $white;
        $popconfirm-border-radius: 0.5rem;

        $popconfirm-popover-width: 300px;
        $popconfirm-popover-margin: 5px;
        $popconfirm-modal-width: $popconfirm-popover-width;
        $popconfirm-buttons-container-btn-ml: 0.5rem;
        $popconfirm-backdrop-background-color: rgba(0, 0, 0, 0.4);
        $popconfirm-border: 1px solid #f5f5f5;