Popconfirm
React 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
import React, { useState } from 'react';
import {
MDBPopconfirm,
MDBPopconfirmMessage,
} from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBPopconfirm placement='bottom' btnChildren='DEFAULT'>
<MDBPopconfirmMessage>This is example</MDBPopconfirmMessage>
</MDBPopconfirm>
);
}
Display mode
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
import React, { useState } from 'react';
import {
MDBPopconfirm,
MDBPopconfirmMessage,
} from 'mdb-react-ui-kit';
export default function App() {
return (
<>
<MDBPopconfirm modal btnChildren='MODAL'>
<MDBPopconfirmMessage>Are you sure?</MDBPopconfirmMessage>
</MDBPopconfirm>
<MDBPopconfirm placement='bottom' btnChildren='INLINE'>
<MDBPopconfirmMessage>Are you sure?</MDBPopconfirmMessage>
</MDBPopconfirm>
</>
);
}
Icon example
To apply icon to message use property icon
like
on example below:
import React, { useState } from 'react';
import {
MDBPopconfirm,
MDBPopconfirmMessage,
MDBIcon
} from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBPopconfirm placement='bottom' btnChildren='ICON'>
<MDBPopconfirmMessage icon={<MDBIcon icon='comment' />}> Icon example</MDBPopconfirmMessage>
</MDBPopconfirm>
);
}
Inline positions
You can choose between different positions
Available positions:
top-end; top; top-start; right-start; right; right-end; bottom-end; bottom; bottom
-start; left-end; left; left-start;
import React, { useState } from 'react';
import {
MDBPopconfirm,
MDBPopconfirmMessage,
MDBRow,
MDBCol
} from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBRow className="row-cols-md-1 d-flex justify-content-center">
<MDBCol md="3"></MDBCol>
<MDBCol md="6" className='d-flex justify-content-center mb-1'>
<MDBPopconfirm btnClassName='me-1' placement='top-end' btnChildren='TOP LEFT'>
<MDBPopconfirmMessage>Are you sure?</MDBPopconfirmMessage>
</MDBPopconfirm>
<MDBPopconfirm btnClassName='me-1' placement='top' btnChildren='TOP'>
<MDBPopconfirmMessage>Are you sure?</MDBPopconfirmMessage>
</MDBPopconfirm>
<MDBPopconfirm btnClassName='me-1' placement='top-start' btnChildren='TOP RIGHT'>
<MDBPopconfirmMessage>Are you sure?</MDBPopconfirmMessage>
</MDBPopconfirm>
</MDBCol>
<MDBCol md="3"></MDBCol>
<MDBCol md="3"></MDBCol>
<MDBCol md="6" className='d-flex mb-1' style={{ justifyContent: 'space-between' }}>
<MDBPopconfirm btnClassName='me-1' placement='left-end' btnChildren='LEFT TOP'>
<MDBPopconfirmMessage>Are you sure?</MDBPopconfirmMessage>
</MDBPopconfirm>
<MDBPopconfirm btnClassName='me-1' placement='right-end' btnChildren='RIGHT TOP'>
<MDBPopconfirmMessage>Are you sure?</MDBPopconfirmMessage>
</MDBPopconfirm>
</MDBCol>
<MDBCol md="3"></MDBCol>
<MDBCol md="3"></MDBCol>
<MDBCol md="6" className='d-flex mb-1' style={{ justifyContent: 'space-between' }}>
<MDBPopconfirm btnClassName='me-1' placement='left' btnChildren='LEFT'>
<MDBPopconfirmMessage>Are you sure?</MDBPopconfirmMessage>
</MDBPopconfirm>
<MDBPopconfirm btnClassName='me-1' placement='right' btnChildren='RIGHT'>
<MDBPopconfirmMessage>Are you sure?</MDBPopconfirmMessage>
</MDBPopconfirm>
</MDBCol>
<MDBCol md="3"></MDBCol>
<MDBCol md="3"></MDBCol>
<MDBCol md="6" className='d-flex mb-1' style={{ justifyContent: 'space-between' }}>
<MDBPopconfirm btnClassName='me-1' placement='left-start' btnChildren='LEFT BOTTOM'>
<MDBPopconfirmMessage>Are you sure?</MDBPopconfirmMessage>
</MDBPopconfirm>
<MDBPopconfirm btnClassName='me-1' placement='right-start' btnChildren='RIGHT BOTTOM'>
<MDBPopconfirmMessage>Are you sure?</MDBPopconfirmMessage>
</MDBPopconfirm>
</MDBCol>
<MDBCol md="3"></MDBCol>
<MDBCol md="3"></MDBCol>
<MDBCol md="5" className='d-flex justify-content-center mb-1'>
<MDBPopconfirm btnClassName='me-1' placement='bottom-end' btnChildren='BOTTOM LEFT'>
<MDBPopconfirmMessage>Are you sure?</MDBPopconfirmMessage>
</MDBPopconfirm>
<MDBPopconfirm btnClassName='me-1' placement='bottom' btnChildren='BOTTOM'>
<MDBPopconfirmMessage>Are you sure?</MDBPopconfirmMessage>
</MDBPopconfirm>
<MDBPopconfirm btnClassName='me-1' placement='bottom-start' btnChildren='BOTTOM RIGHT'>
<MDBPopconfirmMessage>Are you sure?</MDBPopconfirmMessage>
</MDBPopconfirm>
</MDBCol>
<MDBCol md="3"></div>
</MDBRow>
);
}
Popconfirm - API
Import
import {
MDBPopconfirm,
MDBPopconfirmMessage,
} from 'mdb-react-ui-kit';
Properties
MDBPopconfirm
Name | Type | Default | Description | Example |
---|---|---|---|---|
btnChildren
|
React.ReactNode | '' |
The text placed in the popconfirm button. |
<MDBPopconfirm btnChildren='popconfirm'
>...</MDBPopconfirm>
|
btnClassName
|
String | '' |
Add custom class to MDBPopconfirm button. |
<MDBPopconfirm btnClassName='test'
>...</MDBPopconfirm>
|
cancelBtnClasses
|
string | '' |
Add custom class to MDBPopconfirm cancel button. |
<MDBPopconfirm
cancelBtnClasses="class">...</MDBPopconfirm>
|
cancelBtnText
|
React.ReactNode | 'Cancel' |
The text placed in the popconfirm confirm button. |
<MDBPopconfirm confirmBtnText='ok'
>...</MDBPopconfirm>
|
confirmBtnClasses
|
string | '' |
Add custom class to MDBPopconfirm confirm button. |
<MDBPopconfirm
confirmBtnClasses="class">...</MDBPopconfirm>
|
confirmBtnText
|
React.ReactNode | 'Ok' |
The text placed in the popconfirm confirm button. |
<MDBPopconfirm confirmBtnText='ok'
>...</MDBPopconfirm>
|
modal
|
boolean | false |
Set the display mode to modal. |
<MDBPopconfirm modal >...</MDBPopconfirm>
|
placement
|
'top' | 'auto' | 'auto-start' | 'auto-end' | 'bottom' | 'right' | 'left' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'right-start' | 'right-end' | 'left-start' | 'left-end' | 'top' |
Specify position to display popover. |
<MDBPopconfirm
placement='bottom'>...</MDBPopconfirm>
|
popperTag
|
string | 'div' |
Define tag of the MDBPopconfirm popper. |
<MDBPopconfirm
popperTag="span">...</MDBPopconfirm>
|
MDBPopconfirmMessage
Name | Type | Default | Description | Example |
---|---|---|---|---|
icon
|
React.ReactNode | - |
Add icon to MDBPopconfirmMessage . |
<MDBPopconfirmMessage icon={
|
tag
|
string | 'p' |
Define tag of the MDBPopconfirmMessage wrapper.
|
<MDBPopconfirmMessage
tag="span">...</MDBPopconfirmMessage>
|
Events
MDBPopconfirm
Name | Type | Description |
---|---|---|
onCancel
|
(event: React.MouseEvent) => void | This event fires immediately when the popconfirm is closed without confirm button click. |
onConfirm
|
(event: React.MouseEvent) => void | This event fires immediately when the popconfirm is closed using confirm button. |