Popconfirm

Vue Popconfirm component

Responsive popconfirm built with the latest Bootstrap 5 and Vue 3. 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

        
            
            <template>
              <MDBPopconfirm>
                Default
              </MDBPopconfirm>
            </template>
          
        
    
        
            
            <script>
              import { MDBPopconfirm } from "mdb-vue-ui-kit";
              export default {
                components: {
                  MDBPopconfirm
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBPopconfirm } from "mdb-vue-ui-kit";
            </script>

Display mode

Add modal property to change popconfirm's mode to modal.

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 

        
            
            <template>
              <MDBPopconfirm modal>
                Modal
              </MDBPopconfirm>
              <MDBPopconfirm>
                Inline
              </MDBPopconfirm>
            </template>
          
        
    
        
            
            <script>
              import { MDBPopconfirm } from "mdb-vue-ui-kit";
              export default {
                components: {
                  MDBPopconfirm
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBPopconfirm } from "mdb-vue-ui-kit";
            </script>

Icon example

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

        
            
            <template>
              <MDBPopconfirm
                icon="fa fa-comment"
                message="Icon example"
              >
                Icon
              </MDBPopconfirm>
            </template>
          
        
    
        
            
            <script>
              import { MDBPopconfirm } from "mdb-vue-ui-kit";
              export default {
                components: {
                  MDBPopconfirm
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBPopconfirm } from "mdb-vue-ui-kit";
            </script>

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; 

        
            
            <template>
              <MDBPopconfirm position="top left">
                Top left
              </MDBPopconfirm>
              <MDBPopconfirm position="bottom">
                Bottom
              </MDBPopconfirm>
              <MDBPopconfirm position="right top">
                Right top
              </MDBPopconfirm>
            </template>
          
        
    
        
            
            <script>
              import { MDBPopconfirm } from "mdb-vue-ui-kit";
              export default {
                components: {
                  MDBPopconfirm
                }
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBPopconfirm } from "mdb-vue-ui-kit";
            </script>

Popconfirm - API

Import

        
            
          <script>
            import {
              MDBPopconfirm
            } from 'mdb-vue-ui-kit';
          </script>

Properties

Property Type Default Description
tag String "button" Defines tag element for reference element.
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
confirmText String 'OK' Text of confirm button
icon String '' Icon rendered at start of message
message String 'Are you sure?' Message rendered in popconfirm
modal Boolean false Sets display mode modal
position String '' Specify position to display popover
offset String '0, 5' Specify offset of the popover from the reference button

Events

Name Description
cancel This event fires immediately when the popconfirm is closed without confirm button click.
confirm This event fires immediately when the popconfirm is closed using confirm button. 
        
            
          <template>
            <MDBPopconfirm @confirm="doSomething"></MDBPopconfirm>
          </template>

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;