Popconfirm (confirmación emergente)

Muestra una burbuja de confirmación al pulsar un elemento; sirve para la doble confirmación antes de operaciones peligrosas o importantes. Su semántica es role="alertdialog": al abrirse atrapa el foco y se cierra al confirmar / cancelar o pulsar Esc.

Uso básico

Confirmar / cancelar / tipo de tono

Confirmado 0 veces

import { LhButton, LhPopconfirm } from '@lh-ui/react'

export default function Demo() {
  return (
    <LhPopconfirm title="¿Confirmas esta acción?" onConfirm={() => console.log('confirmed')}>
      <LhButton>Confirmar</LhButton>
    </LhPopconfirm>
  )
}

Popconfirm Props

Prop	Descripción	Tipo	Valores permitidos	Predeterminado
children	Nodo disparador	ReactNode	—	—
title	Título / pregunta de la confirmación	ReactNode	—	—
confirmText	Texto del botón de confirmación	string	—	Paquete de idioma popconfirm.confirm (确定)
cancelText	Texto del botón de cancelación	string	—	Paquete de idioma popconfirm.cancel (取消)
type	Tipo de tono	'info' | 'warning' | 'danger'	—	'warning'
placement	Posición de visualización	LhPopconfirmPlacement	top / bottom / left / right (con -start / -end)	'top'
trigger	Modo de disparo	LhPopconfirmTrigger	'hover' | 'click' | 'focus' | 'manual'	'click'
disabled	Desactivado	boolean	—	false
showIcon	Si se muestra el icono	boolean	—	true
hideCancel	Si se oculta el botón de cancelación	boolean	—	false
visible	Visibilidad controlada	boolean	—	—
defaultVisible	Visibilidad por defecto no controlada	boolean	—	false
popperClass	Clase personalizada de la capa flotante	string	—	—
themeVars	Variables de tema a nivel de componente	Record<string, string>	—	—
sx	Props rápidas de layout (actúan sobre el disparador)	SxProps	—	—

Eventos de Popconfirm

Evento	Descripción	Firma del callback	Equivalente en Vue
onConfirm	Se pulsa el botón de confirmación	() => void	confirm
onCancel	Se pulsa el botón de cancelación o se pulsa Esc	() => void	cancel
onVisibleChange	Cambio de visibilidad	(visible: boolean) => void	update:visible

Captura de foco y Esc

La capa emergente siempre atrapa el foco como alertdialog; pulsar Esc equivale a hacer clic en cancelar (dispara onCancel y cierra).

Cierre automático tras confirmar

Igual que en plus: tanto al confirmar como al cancelar, primero se dispara el callback y luego se cierra, sin que haga falta retirarlo manualmente desde fuera.

Estilos

import '@lh-ui/react/style/popconfirm'