Popconfirm

A lightweight confirmation popup.

Basic Usage

<template>
  <bp-popconfirm content="Confirm this action?" :on-before-ok="handleBeforeOk">
    <bp-button>Open popconfirm</bp-button>
  </bp-popconfirm>
</template>

<script setup lang="ts">
const handleBeforeOk = async () => {
  await new Promise(resolve => setTimeout(resolve, 2000));
  return true;
};
</script>

Type

type supports info, success, warning, and error.

<template>
  <bp-space :size="16">
    <bp-popconfirm content="Confirm this action?" type="info">
      <bp-button status="primary">Info</bp-button>
    </bp-popconfirm>
    <bp-popconfirm content="Confirm this action?" type="success">
      <bp-button status="success">Success</bp-button>
    </bp-popconfirm>
    <bp-popconfirm content="Confirm this action?" type="warning">
      <bp-button status="warning">Warning</bp-button>
    </bp-popconfirm>
    <bp-popconfirm content="Confirm this action?" type="error">
      <bp-button status="danger">Error</bp-button>
    </bp-popconfirm>
  </bp-space>
</template>

Position

Position the popup relative to the trigger.

<template>
  <div class="position-demo">
    <bp-popconfirm content="Confirm?" position="top">
      <bp-button>Top</bp-button>
    </bp-popconfirm>
    <bp-popconfirm content="Confirm?" position="bottom">
      <bp-button>Bottom</bp-button>
    </bp-popconfirm>
    <bp-popconfirm content="Confirm?" position="top-left">
      <bp-button>Top Left</bp-button>
    </bp-popconfirm>
    <bp-popconfirm content="Confirm?" position="top-right">
      <bp-button>Top Right</bp-button>
    </bp-popconfirm>
    <bp-popconfirm content="Confirm?" position="bottom-left">
      <bp-button>Bottom Left</bp-button>
    </bp-popconfirm>
    <bp-popconfirm content="Confirm?" position="bottom-right">
      <bp-button>Bottom Right</bp-button>
    </bp-popconfirm>
  </div>
</template>

<style lang="scss" scoped>
.position-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
</style>

Custom Button Text

Customize labels with ok-text and cancel-text.

<template>
  <bp-popconfirm content="This cannot be undone. Delete?" type="error" ok-text="Delete" cancel-text="Cancel" @ok="handleOk">
    <bp-button status="danger">Delete</bp-button>
  </bp-popconfirm>
</template>

<script setup lang="ts">
const handleOk = () => {
  console.log("confirmed");
};
</script>

Async Confirm

Use on-before-ok and keep loading until resolved.

<template>
  <bp-popconfirm content="Submit?" :on-before-ok="handleBeforeOk" @ok="handleOk">
    <bp-button status="primary">Async submit</bp-button>
  </bp-popconfirm>
</template>

<script setup lang="ts">
const handleBeforeOk = async () => {
  await new Promise((resolve) => setTimeout(resolve, 2000));
  return true;
};

const handleOk = () => {
  console.log("submitted");
};
</script>

Popconfirm Props

content	Popconfirm content	String	-	-
type	Popconfirm type; affects icon and button style	String	info	-
position	Popup position	TriggerPosition	top	-
ok-text	OK button text	String	OK	-
cancel-text	Cancel button text	String	Cancel	-
on-before-ok	Async callback before confirm; return true to close, false to keep open. Button shows loading automatically	Function	-	-

Popconfirm Events

ok	Triggered after confirm	-	-
cancel	Triggered after cancel	-	-

Popconfirm Slots

default

Element that triggers the popup

-

-