Popconfirm
A simple confirmation dialog of an element click action.
Placement
popconfirm has 9 placements.
Use attribute title to set the display content when click the reference element. The attribute placement determines the position of the popconfirm. Its value is [orientation]-[alignment] with four orientations top, left, right, bottom and three alignments start, end, null, and the default alignment is null. Take placement="left-end" for example, popconfirm will display on the left of the element which you are hovering and the bottom of the popconfirm aligns with the bottom of the element.
top-start top top-end
left-start right-start
left right
left-end right-end
bottom-start bottom bottom-end
export function PopconfirmPlacement() { return ( <div className={styles.placement}> <div className={`${styles.row} ${styles.center}`}> <ElPopconfirm title="Top Left prompts info" placement="top-start"> <ElButton>top-start</ElButton> </ElPopconfirm> <ElPopconfirm title="Top Center prompts info" placement="top"> <ElButton>top</ElButton> </ElPopconfirm> <ElPopconfirm title="Top Right prompts info" placement="top-end"> <ElButton>top-end</ElButton> </ElPopconfirm> </div> <div className={`${styles.row} ${styles.between}`}> <ElPopconfirm title="Left Top prompts info" placement="left-start"> <ElButton>left-start</ElButton> </ElPopconfirm> <ElPopconfirm title="Right Top prompts info" placement="right-start"> <ElButton>right-start</ElButton> </ElPopconfirm> </div> <div className={`${styles.row} ${styles.between}`}> <ElPopconfirm title="Left Center prompts info" placement="left"> <ElButton style={{ margin: "12px 0" }}>left</ElButton> </ElPopconfirm> <ElPopconfirm title="Right Center prompts info" placement="right"> <ElButton>right</ElButton> </ElPopconfirm> </div> <div className={`${styles.row} ${styles.between}`}> <ElPopconfirm title="Left Bottom prompts info" placement="left-end"> <ElButton>left-end</ElButton> </ElPopconfirm> <ElPopconfirm title="Right Bottom prompts info" placement="right-end"> <ElButton>right-end</ElButton> </ElPopconfirm> </div> <div className={`${styles.row} ${styles.center}`}> <ElPopconfirm title="Bottom Left prompts info" placement="bottom-start"> <ElButton>bottom-start</ElButton> </ElPopconfirm> <ElPopconfirm title="Bottom Center prompts info" placement="bottom"> <ElButton>bottom</ElButton> </ElPopconfirm> <ElPopconfirm title="Bottom Right prompts info" placement="bottom-end"> <ElButton>bottom-end</ElButton> </ElPopconfirm> </div> </div> ); } Basic usage
Popconfirm is similar to Popover. So for some duplicated attributes, please refer to the documentation of Popover.
Only title attribute is available in Popconfirm, content will be ignored.
Delete
export function PopconfirmBasicUsage() { return ( <ElPopconfirm title="Are you sure to delete this?"> <ElButton>Delete</ElButton> </ElPopconfirm> ); } Customize
You can customize Popconfirm like:
Delete
export function PopconfirmCustomize() { const [clicked, setClicked] = useState(false); return ( <ElPopconfirm width={220} icon={<InfoFilled />} iconColor="#626AEF" title="Are you sure to delete this?" onCancel={() => setClicked(true)} actions={({ confirm, cancel }) => ( <> <ElButton size="small" onClick={cancel}>No!</ElButton> <ElButton type="danger" size="small" disabled={!clicked} onClick={confirm} > Yes? </ElButton> </> )} > <ElButton>Delete</ElButton> </ElPopconfirm> ); } Trigger event
Click the button to trigger the event
Delete
export function PopconfirmTriggerEvent() { return ( <ElPopconfirm confirmButtonText="Yes" cancelButtonText="No" icon={<InfoFilled />} iconColor="#626AEF" title="Are you sure to delete this?" > <ElButton>Delete</ElButton> </ElPopconfirm> ); } API
Attributes
Name Description Type Default title Title string— effect 2.11.2 Tooltip theme, built-in theme: dark / light enumstringlight confirm-button-text Confirm button text string— cancel-button-text Cancel button text string— confirm-button-type Confirm button type enumprimary cancel-button-type Cancel button type enumtext icon Icon Component stringComponentQuestionFilled icon-color Icon color string#f90 hide-icon is hide Icon booleanfalse hide-after delay of disappear, in millisecond number200 teleported whether popconfirm is teleported to the body booleantrue persistent when popconfirm inactive and persistent is false , popconfirm will be destroyed booleanfalse width popconfirm width, min width 150px stringnumber150 tooltip Inherits all attributes from Tooltip, except: popper-class, popper-style, fallback-placements — —
Events
Name Description Type confirm triggers when click confirm button Functioncancel triggers when click cancel button Function
Slots
Name Description Type reference HTML element that triggers Popconfirm — actions 2.8.1 content of the Popconfirm footer object
Exposes
Name Description Type popperRef 2.10.7 el-popper component instance objecthide 2.10.7 hide popconfirm Function
