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

Required ES init: Popconfirm *
* UMD autoinits are enabled by default. This means that you don't need to initialize the component manually. However if you are using MDBootstrap ES format then you should pass the required components to the initMDB method.

Basic example

Basic example of popconfirm usage.

        
            
            <button type="button" 
            class="btn btn-primary popconfirm-toggle" 
            data-mdb-popconfirm-init 
            data-mdb-ripple-init 
            data-mdb-message="This is example">
            Default
          </button>
          
        
    
        
            
            // Initialization for ES Users
            import { Popconfirm, initMDB } from "mdb-ui-kit";

            initMDB({ Popconfirm });
          
        
    

Display mode

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

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

        
            
            <button type="button" 
              data-mdb-popconfirm-mode="modal" 
              data-mdb-popconfirm-init 
              data-mdb-ripple-init
              class="btn btn-primary popconfirm-toggle">
              Modal
            </button>
            <button type="button" 
              data-mdb-popconfirm-mode="inline" 
              data-mdb-popconfirm-init 
              data-mdb-ripple-init
              class="btn btn-primary popconfirm-toggle">
              Inline
            </button>
          
        
    
        
            
            // Initialization for ES Users
            import { Popconfirm, initMDB } from "mdb-ui-kit";

            initMDB({ Popconfirm });
          
        
    

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"

        
            
            <button
              type="button"
              data-mdb-popconfirm-mode="inline"
              data-mdb-popconfirm-icon="fa fa-comment"
              data-mdb-message="Icon example"
              data-mdb-popconfirm-init 
              data-mdb-ripple-init
              class="btn btn-primary popconfirm-toggle me-1"
            >
              Icon
            </button>
          
        
    
        
            
            // Initialization for ES Users
            import { Popconfirm, initMDB } from "mdb-ui-kit";

            initMDB({ Popconfirm });
          
        
    

Inline positions

You can choose between different positions

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" 
              data-mdb-popconfirm-init 
              data-mdb-ripple-init
              class="btn btn-primary popconfirm-toggle">
              Top left
            </button>
            <button 
              type="button" 
              data-mdb-popconfirm-mode="inline" 
              data-mdb-position="bottom" 
              data-mdb-popconfirm-init 
              data-mdb-ripple-init
              class="btn btn-primary popconfirm-toggle">
              Bottom
            </button>
            <button 
              type="button" 
              data-mdb-popconfirm-mode="inline" 
              data-mdb-position="right top" 
              data-mdb-popconfirm-init 
              data-mdb-ripple-init
              class="btn btn-primary popconfirm-toggle">
              Right top
            </button>
          
        
    
        
            
            // Initialization for ES Users
            import { Popconfirm, initMDB } from "mdb-ui-kit";

            initMDB({ Popconfirm });
          
        
    

Popconfirm - API


Import

Importing components depends on how your application works. If you intend to use the MDBootstrap ES format, you must first import the component and then initialize it with the initMDB method. If you are going to use the UMD format, just import the mdb-ui-kit package.

        
            
          import { Popconfirm, initMDB } from "mdb-ui-kit";
          
          initMDB({ Popconfirm });
        
        
    
        
            
          import "mdb-ui-kit"
        
        
    

Usage

Via data attributes

Using the Popconfirm component doesn't require any additional JavaScript code - simply add data-mdb-popconfirm-init attribute to .btn and use other data attributes to set all options. For ES format, you must first import and call the initMDB method.

        
            
          <button type="button" class="btn btn-primary popconfirm-toggle" data-mdb-popconfirm-init>Default</button>
        
        
    

Via JavaScript

        
            
          const element = document.querySelector('.popconfirm-toggle');
          const instance = new Popconfirm(element);
        
        
    
        
            
          const element = document.querySelector('.popconfirm-toggle');
          const instance = new mdb.Popconfirm(element);
        
        
    

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-mdb-, as in data-mdb-ok-text="OK".

Name Type Default Description
cancelClass String 'btn-secondary' Class of cancel button
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
message String 'Are you sure?' Message rendered in popconfirm
okClass String 'btn-primary' Class of confirm button
okText String 'OK' Text of confirm button
popconfirmIcon String '' Icon rendered at start of message
popconfirmMode String 'inline' Mode can be set to either inline or modal
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 myPopconfirm.dispose()
        
            
            const popconfirmElement = document.getElementById('myPopconfirm');
            const instance = Popconfirm.getInstance(popconfirmElement);
            instance.dispose();
          
        
    
        
            
            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.
        
            
            document.addEventListener('cancel.mdb.popconfirm', () => {
              // Your code goes here
            });
          
        
    

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};
          --#{$prefix}popconfirm-text-color: #{$popconfirm-text-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};
          
          // .popconfirm-icon-container i
          --#{$prefix}popconfirm-icon-text-color: #{$popconfirm-icon-text-color};
        
        
    

SCSS variables

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

        $popconfirm-padding: 1rem;
        $popconfirm-background-color: var(--#{$prefix}surface-bg);
        $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 var(--#{$prefix}divider-color);
        $popconfirm-text-color: var(--#{$prefix}surface-color);
        $popconfirm-icon-text-color: var(--#{$prefix}surface-color);