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>

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>

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>

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>

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.