Popconfirm

Un diálogo de confirmación simple activado por un clic.

Importar

import { Popconfirm } from 'asterui'

Ejemplos

Básico

Popconfirm simple con título.

</>

Delete

import { Popconfirm, Button, notification } from 'asterui'

function App() {
  const handleDelete = () => {
    notification.success({
      message: 'Deleted',
      description: 'The item has been deleted successfully.',
    });
  };
  
  return (
      <Popconfirm title="Are you sure?" onConfirm={handleDelete}>
        <Button color="error">Delete</Button>
      </Popconfirm>
    )
}

export default App

Con descripción

Agrega una descripción para más contexto.

</>

Delete

import { Popconfirm, Button, notification } from 'asterui'

function App() {
  const handleDelete = () => {
    notification.success({
      message: 'Deleted',
      description: 'The item has been deleted successfully.',
    });
  };
  
  return (
      <Popconfirm
        title="Delete this task?"
        description="This action cannot be undone. Are you sure you want to continue?"
        onConfirm={handleDelete}
      >
        <Button color="error">Delete</Button>
      </Popconfirm>
    )
}

export default App

Posiciones

Popconfirm puede colocarse en diferentes posiciones.

</>

Top

Right

Bottom

Left

import { Popconfirm, Button } from 'asterui'

function App() {
  return (
      <div className="flex gap-4 flex-wrap">
        <Popconfirm title="Delete?" placement="top">
          <Button>Top</Button>
        </Popconfirm>
        <Popconfirm title="Delete?" placement="right">
          <Button>Right</Button>
        </Popconfirm>
        <Popconfirm title="Delete?" placement="bottom">
          <Button>Bottom</Button>
        </Popconfirm>
        <Popconfirm title="Delete?" placement="left">
          <Button>Left</Button>
        </Popconfirm>
      </div>
    )
}

export default App

Texto personalizado

Personaliza el texto y tipos de botones.

</>

Submit

import { Popconfirm, Button, notification } from 'asterui'

function App() {
  return (
      <Popconfirm
        title="Confirm submission?"
        okText="Yes, submit"
        cancelText="No, cancel"
        okType="success"
        cancelType="error"
        onConfirm={() => {
          notification.success({ message: 'Submitted!', description: 'Form submitted successfully.' });
        }}
      >
        <Button color="primary">Submit</Button>
      </Popconfirm>
    )
}

export default App

Confirmación asíncrona

Maneja operaciones asíncronas con estado de carga.

</>

Delete (Async)

import { Popconfirm, Button, notification } from 'asterui'

function App() {
  const handleAsyncDelete = () => {
    return new Promise<void>((resolve) => {
      setTimeout(() => {
        notification.success({
          message: 'Deleted',
          description: 'The item has been deleted after async operation.',
        });
        resolve();
      }, 2000);
    });
  };
  
  return (
      <Popconfirm
        title="Delete this item?"
        description="This will take a moment..."
        onConfirm={handleAsyncDelete}
      >
        <Button color="error">Delete (Async)</Button>
      </Popconfirm>
    )
}

export default App

Icono personalizado

Personaliza u oculta el icono.

</>

Custom Icon

No Icon

import { Popconfirm, Button } from 'asterui'

function App() {
  return (
      <div className="flex gap-4">
        <Popconfirm title="Delete this?" icon={<span className="text-2xl">🗑️</span>}>
          <Button>Custom Icon</Button>
        </Popconfirm>
        <Popconfirm title="Proceed?" icon={null}>
          <Button>No Icon</Button>
        </Popconfirm>
      </div>
    )
}

export default App

Sin botón de cancelar

Oculta el botón de cancelar para confirmaciones de solo reconocimiento.

</>

Show Info

import { Popconfirm, Button } from 'asterui'

function App() {
  return (
      <Popconfirm
        title="Acknowledge this message"
        description="Click OK to dismiss."
        showCancel={false}
        okText="Got it"
      >
        <Button color="info">Show Info</Button>
      </Popconfirm>
    )
}

export default App

Deshabilitado

Popconfirm deshabilitado.

</>

Disabled

import { Popconfirm, Button } from 'asterui'

function App() {
  return (
      <Popconfirm title="Are you sure?" disabled>
        <Button disabled>Disabled</Button>
      </Popconfirm>
    )
}

export default App

API

Popconfirm

Propiedad	Descripción	Tipo	Predeterminado
children	Elemento activador	React.ReactElement	-
title	Título de la confirmación	React.ReactNode	-
description	Texto de descripción	React.ReactNode	-
onConfirm	Callback cuando se confirma (soporta async)	() => void | Promise<void>	-
onCancel	Callback cuando se cancela	() => void	-
okText	Texto para botón de confirmar	string	'OK'
cancelText	Texto para botón de cancelar	string	'Cancel'
okType	Tipo de botón para botón de confirmar	'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error' | 'info'	'primary'
cancelType	Tipo de botón para botón de cancelar	'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error' | 'info' | 'ghost'	'ghost'
placement	Posición del popup de confirmación	'top' | 'bottom' | 'left' | 'right'	'top'
disabled	Si el popconfirm está deshabilitado	boolean	false
icon	Icono personalizado (null para ocultar el predeterminado)	React.ReactNode	-
showCancel	Mostrar botón de cancelar	boolean	true

Accesibilidad

• El foco queda atrapado dentro del popconfirm cuando está abierto
• La tecla Escape cierra el popconfirm
• Los botones son accesibles por teclado
• El estado de carga se comunica vía aria-busy