Popconfirm

Displays a popover with confirmation content on click. Commonly used for dangerous prompts, important toggles, and other scenarios.

Basic Usage

Configure simple prompt information via title.

Basic Usage

Placement

Supports 12 directions of popup positioning, controlled via the placement prop.

Placement

Custom Configuration

Freely customize button text, type, or hide specific elements.

Custom Configuration

Advanced Features

YH-UI's unique "button position swap" and "don't ask again" state feedback.

Advanced Features

Async Close

Easily implement API interception logic by combining with the before-confirm prop.

Async Interception

Custom Slots

Use title and description slots to customize complex rich text content.

Complex Content Slot

Hide Arrow

Control whether the popover displays the indicator arrow via the show-arrow prop.

Arrow Display

Theme Appearance

Easily customize component styling by modifying CSS variables. For example, use popper-style to override local theme variables.

Theme Customization

Use in Nuxt

YhPopconfirm fully supports Nuxt 3. Thanks to the Tooltip-based ultra-fast positioning engine, it maintains excellent performance in SSR environments.

Nuxt Demo

Simply add the module configuration in nuxt.config.ts:

export default defineNuxtConfig({ modules: ['@yh-ui/nuxt'] })

API

Props

Prop	Description	Type	Default
title	Title	string	-
description	Description content	string	-
confirm-button-text	Confirm button text	string	Confirm
cancel-button-text	Cancel button text	string	Cancel
confirm-button-type	Confirm button type	string	primary
cancel-button-type	Cancel button type	string	default
icon	Icon name	string	warning
icon-color	Icon color	string	#faad14
hide-icon	Whether to hide icon	boolean	false
hide-cancel	Whether to hide cancel button	boolean	false
width	Width	string / number	180
placement	Popup position	TooltipPlacement	'top'
visible	Manual control visibility	boolean | null	null
offset	Offset [skidding, distance]	array	[0, 12]
disabled	Whether to disable	boolean	false
show-arrow	Whether to show arrow	boolean	true
teleported	Whether to mount to body	boolean	true
z-index	Z-index	number	2000
popper-class	Custom popover class	string	-
popper-style	Custom popover style	object	{}
before-confirm	Lifecycle hook before confirm	function	-
swap-buttons	Whether to swap button positions	boolean	false
show-dont-ask-again	Whether to show "don't ask again" checkbox	boolean	false
dont-ask-again-text	Text for "don't ask again"	string	Don't ask again

Slots

Slot Name	Description
default	Trigger element for popover
icon	Custom icon
title	Custom title
description	Custom description content

Events

Event Name	Description	Parameters
confirm	Triggered when confirm button is clicked	(isSet: boolean)
cancel	Triggered when cancel button is clicked	-
update:visible	Triggered when visibility changes	(visible: boolean)

Theme Variables (CSS Variables)

Variable	Default	Description
--yh-popconfirm-title	#1d1d1f	Title text color
--yh-popconfirm-desc	#424245	Description text color
--yh-tooltip-bg-color	rgba(255, 255, 255, 0.88)	Popover background color
--yh-tooltip-border-color	rgba(0, 0, 0, 0.08)	Popover border color