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

Show code

        
            
          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.

Show code

        
            
            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.

Show code

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:

Show code

        
            
          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