Popconfirm

A simple confirmation dialog of an element click action.

?

Name	Category	Description	Type	Default
confirmButtonType	? Style	Confirm button type	ButtonType	'primary'
cancelButtonType	? Style	Cancel button type	ButtonType	—
hideIcon	? Style	Whether to hide icon	boolean	false
showArrow	? Style	Whether to show arrow	boolean	false
effect	? Style	Tooltip theme	TooltipEffect	'dark'
width	? Size	Pop-up width	number | string	150
iconColor	? Color	Icon color	string	'#f90'
disabled	? State	Whether disabled	boolean	false
hideAfter	? Behavior	Hide delay (ms)	number	200
placement	? Behavior	Popover placement	Placement	'bottom'
title	? Content	Title	string	—
confirmButtonText	? Content	Confirm button text	string	'Yes'
cancelButtonText	? Content	Cancel button text	string	'No'
icon	? Content	Icon	string	'question-circle'
confirm	? Event	Triggered when confirm is clicked	(event: MouseEvent) => void	—
cancel	? Event	Triggered when cancel is clicked	(event: MouseEvent) => void	—
default	? Slot	Element that triggers Popconfirm		—
reference	? Slot	Same as default		—

Basic Usage

<template>
  <px-popconfirm title="Are you sure to delete this?" @confirm="onConfirm" @cancel="onCancel">
    <px-button type="danger">Delete</px-button>
  </px-popconfirm>
</template>

<script setup lang="ts">
import { PxMessage } from 'sakana-element';

const onConfirm = () => {
  PxMessage.success('Deleted!');
};

const onCancel = () => {
  PxMessage.info('Cancelled');
};
</script>

Customize

Customize button text and icon.

<template>
  <px-popconfirm
    title="This will permanently delete the file. Continue?"
    confirm-button-text="Yes"
    cancel-button-text="No"
    icon="warning-box"
    icon-color="#f56c6c"
    @confirm="onConfirm"
  >
    <px-button type="danger">Delete File</px-button>
  </px-popconfirm>
</template>

<script setup lang="ts">
import { PxMessage } from 'sakana-element';

const onConfirm = () => {
  PxMessage.success('File deleted!');
};
</script>

Placement

Use placement to set the pop-up position.

<template>
  <div style="display: flex; gap: 12px; flex-wrap: wrap;">
    <px-popconfirm title="Top placement" placement="top" @confirm="onConfirm">
      <px-button>Top</px-button>
    </px-popconfirm>
    <px-popconfirm title="Bottom placement" placement="bottom" @confirm="onConfirm">
      <px-button>Bottom</px-button>
    </px-popconfirm>
    <px-popconfirm title="Left placement" placement="left" @confirm="onConfirm">
      <px-button>Left</px-button>
    </px-popconfirm>
    <px-popconfirm title="Right placement" placement="right" @confirm="onConfirm">
      <px-button>Right</px-button>
    </px-popconfirm>
  </div>
</template>

<script setup lang="ts">
import { PxMessage } from 'sakana-element';

const onConfirm = () => {
  PxMessage.success('Confirmed!');
};
</script>

Arrow

Set show-arrow to display a pixel-art arrow pointing to the trigger.

<template>
  <div style="display: flex; gap: 12px;">
    <px-popconfirm title="With arrow" show-arrow @confirm="onConfirm">
      <px-button>Show Arrow</px-button>
    </px-popconfirm>
    <px-popconfirm title="Without arrow" @confirm="onConfirm">
      <px-button>No Arrow</px-button>
    </px-popconfirm>
  </div>
</template>

<script setup lang="ts">
import { PxMessage } from 'sakana-element';

const onConfirm = () => {
  PxMessage.success('Confirmed!');
};
</script>

Effect

Use effect to switch between dark and light themes.

<template>
  <div style="display: flex; gap: 12px;">
    <px-popconfirm title="Dark effect" effect="dark" @confirm="onConfirm">
      <px-button>Dark</px-button>
    </px-popconfirm>
    <px-popconfirm title="Light effect" effect="light" @confirm="onConfirm">
      <px-button>Light</px-button>
    </px-popconfirm>
  </div>
</template>

<script setup lang="ts">
import { PxMessage } from 'sakana-element';

const onConfirm = () => {
  PxMessage.success('Confirmed!');
};
</script>

Hide Icon

Set hide-icon to hide the icon.

<template>
  <px-popconfirm title="Confirm action?" hide-icon @confirm="onConfirm">
    <px-button>Action</px-button>
  </px-popconfirm>
</template>

<script setup lang="ts">
import { PxMessage } from 'sakana-element';

const onConfirm = () => {
  PxMessage.success('Action confirmed!');
};
</script>

Disabled

Set disabled to prevent the popconfirm from showing.

<template>
  <px-popconfirm title="Are you sure?" disabled @confirm="onConfirm">
    <px-button>Disabled Popconfirm</px-button>
  </px-popconfirm>
</template>

<script setup lang="ts">
import { PxMessage } from 'sakana-element';

const onConfirm = () => {
  PxMessage.success('Confirmed!');
};
</script>