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
*
* 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 | 'bottom' |
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);