Popconfirm (confirmation contextuelle)

Affiche une bulle de confirmation au clic sur un élément, pour confirmer une action dangereuse ou importante. La sémantique est role="alertdialog" : le focus est piégé dès l'ouverture, et la bulle se ferme après confirmation / annulation ou à l'appui sur Échap.

Utilisation de base

Confirmation / annulation / type de ton

Confirmé 0 fois

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

export default function Demo() {
  return (
    <LhPopconfirm title="Confirmer cette action ?" onConfirm={() => console.log('confirmed')}>
      <LhButton>Confirmer</LhButton>
    </LhPopconfirm>
  )
}

Popconfirm Props

Prop	Description	Type	Options	Valeur par défaut
children	Nœud déclencheur	ReactNode	—	—
title	Titre / question de confirmation	ReactNode	—	—
confirmText	Texte du bouton de confirmation	string	—	Pack de langue popconfirm.confirm
cancelText	Texte du bouton d'annulation	string	—	Pack de langue popconfirm.cancel
type	Type de ton	'info' | 'warning' | 'danger'	—	'warning'
placement	Position d'affichage	LhPopconfirmPlacement	top / bottom / left / right (avec -start / -end)	'top'
trigger	Mode de déclenchement	LhPopconfirmTrigger	'hover' | 'click' | 'focus' | 'manual'	'click'
disabled	Désactivé	boolean	—	false
showIcon	Afficher ou non l'icône	boolean	—	true
hideCancel	Masquer ou non le bouton d'annulation	boolean	—	false
visible	Affichage contrôlé	boolean	—	—
defaultVisible	Affichage par défaut en mode non contrôlé	boolean	—	false
popperClass	Classe personnalisée de la surcouche	string	—	—
themeVars	Variables de thème au niveau du composant	Record<string, string>	—	—
sx	Raccourci de mise en page (appliqué au déclencheur)	SxProps	—	—

Événements de Popconfirm

Événement	Description	Signature du rappel	Équivalent Vue
onConfirm	Clic sur le bouton de confirmation	() => void	confirm
onCancel	Clic sur le bouton d'annulation ou appui sur Échap	() => void	cancel
onVisibleChange	Changement d'affichage	(visible: boolean) => void	update:visible

Piégeage du focus et Échap

La surcouche piégera toujours le focus en tant que alertdialog ; l'appui sur Échap équivaut au clic sur Annulation (déclenche onCancel et ferme).

Fermeture automatique après confirmation

Conformément à plus : un clic sur Confirmer ou sur Annuler déclenche d'abord le rappel puis ferme la bulle, sans repli manuel externe.

Styles

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