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 { 
            MDBPopcofirm, 
            MDBPopconfirmMessage, 
          } from 'mdb-react-ui-kit';
  
          export default function App() {
            return (
              <MDBPopcofirm placement='bottom' btnChildren='DEFAULT'>
                <MDBPopconfirmMessage>This is example</MDBPopconfirmMessage>
              </MDBPopcofirm>
            );
          }

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 { 
            MDBPopcofirm, 
            MDBPopconfirmMessage, 
          } from 'mdb-react-ui-kit';
  
          export default function App() {
            return (
              <>
                <MDBPopcofirm modal btnChildren='MODAL'>
                  <MDBPopconfirmMessage>Are you sure?</MDBPopconfirmMessage>
                </MDBPopcofirm>
                <MDBPopcofirm placement='bottom' btnChildren='INLINE'>
                  <MDBPopconfirmMessage>Are you sure?</MDBPopconfirmMessage>
                </MDBPopcofirm>
              </>
            );
          }

Icon example

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

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

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

Popconfirm - API

Import

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

Properties

MDBPopconfirm

Name Type Default Description Example
tag String 'div' Defines tag of the MDBPopconfirm wrapper <MDBPopconfirm tag="span">...</MDBPopconfirm>
className String '' Add custom class to MDBPopconfirm <MDBPopconfirm className="class">...</MDBPopconfirm>
btnClassName String '' Add custom class to MDBPopconfirm button. <MDBPopconfirm btnClassName='test' >...</MDBPopconfirm>
btnChildren String '' The text placed in the popconfirm button. <MDBPopconfirm btnChildren='popconfirm' >...</MDBPopconfirm>
modal Boolean false Sets the display mode to modal. <MDBPopconfirm modal >...</MDBPopconfirm>
placement String 'top' Specify position to display popover. <MDBPopconfirm placement='bottom'>...</MDBPopconfirm>
popperTag String 'div' Defines tag of the MDBPopconfirm wrapper <MDBPopconfirm popperTag="span">...</MDBPopconfirm>

MDBPopconfirmMessage

Name Type Default Description Example
tag String 'div' Defines tag of the MDBPopconfirmMessage wrapper <MDBPopconfirmMessage tag="span">...</MDBPopconfirmMessage>
className String '' Add custom class to MDBPopconfirmMessage <MDBPopconfirmMessage className="class">...</MDBPopconfirmMessage>
icon Any - Adds icon to MDBPopconfirmMessage <MDBPopconfirmMessage icon={}>...</MDBPopconfirmMessage>