Popconfirm

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

Edit in sandbox 
        
            
            <button type="button" class="btn btn-primary popconfirm-toggle" data-mdb-message="This is example">Default</button>

Display mode

You need to apply .popconfirm-toggle class to button.

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

Edit in sandbox

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 

        
            
            <button type="button" data-mdb-popconfirm-mode="modal" class="btn btn-primary popconfirm-toggle">Modal</button>
            <button type="button" data-mdb-popconfirm-mode="inline" class="btn btn-primary popconfirm-toggle">Inline</button>

Icon example

To apply icon to message you need to give class in data-mdb-popconfirm-icon like on example data-mdb-popconfirm-icon="fa fa-comment"

Edit in sandbox 
        
            
            <button
              type="button"
              data-mdb-popconfirm-mode="inline"
              data-mdb-popconfirm-icon="fa fa-comment"
              data-mdb-message="Icon example"
              class="btn btn-primary popconfirm-toggle me-1"
            >
              Icon
            </button>

Inline positions

You can choose between different positions

Edit in sandbox

Available positions: top left; top; top right; right top; right; right bottom; bottom right; bottom; bottom left; left bottom; left; left top; 

        
            
            <button type="button" data-mdb-popconfirm-mode="inline" data-mdb-position="top left" class="btn btn-primary popconfirm-toggle">
              Top left
            </button>
            <button type="button" data-mdb-popconfirm-mode="inline" data-mdb-position="bottom" class="btn btn-primary popconfirm-toggle">
              Bottom
            </button>
            <button type="button" data-mdb-popconfirm-mode="inline" data-mdb-position="right top" class="btn btn-primary popconfirm-toggle">
              Right top
            </button>

Popconfirm - API

Usage

Via class

You need to apply .popconfirm-toggle class to button.

Edit in sandbox 
        
            
          <button type="button" class="btn btn-primary popconfirm-toggle">Default</button>

Via JavaScript

You need to apply .popconfirm-toggle class to button.

Edit in sandbox 
        
            
          const popconfirmElements = document.querySelectorAll('.popconfirm-toggle');
          popconfirmElements.forEach((currentElement) => { 
            new mdb.Popconfirm(currentElement)
          });

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-mdb-, as in data-mdb-mode="", for two word options name use hyphen "-" as data-mdb-ok-text=""

Name Type Default Description
cancelLabel String 'Cancel' Text rendered under cancel button for screen readers
cancelText String 'Cancel' Text of cancel button, if empty string - button doesn't render
confirmLabel String 'Confirm' Text rendered under confirm button for screen readers
popconfirmIcon String '' Icon rendered at start of message
message String 'Are you sure?' Message rendered in popconfirm
popconfirmMode String 'inline' Mode of display -> 'inline' or 'modal'
okClass String 'btn-primary' Class of confirm button
okText String 'OK' Text of confirm button
position String '' Specify position to display popover

Methods

Method Description Example
getInstance Static method which allows you to get the popconfirm instance associated with a DOM element Popconfirm.getInstance(myPopconfirmEl)
getOrCreateInstance Static method which returns the popconfirm instance associated to a DOM element or create a new one in case it wasn't initialized. Popconfirm.getOrCreateInstance(myPopconfirmEl)
dispose Destroys an element's popconfirm instance.dispose()
Edit in sandbox 
        
            
            const popconfirmElement = document.getElementById('myPopconfirm');
            const instance = mdb.Popconfirm.getInstance(popconfirmElement);
            instance.dispose();

Events

Name Description
cancel.mdb.popconfirm This event fires immediately when the popconfirm is closed without confirm button click.
confirm.mdb.popconfirm This event fires immediately when the popconfirm is closed using confirm button.
Edit in sandbox 
        
            
            document.addEventListener('cancel.mdb.popconfirm', () => {
              //Your code goes here
            });

Import

Popconfirm also works with module bundlers. Use the following code to import this component:

Edit in sandbox 
        
            
            import { Popconfirm } from 'mdb-ui-kit';