Popconfirm

Um diálogo de confirmação simples acionado por uma ação de clique.

Importação

import { Popconfirm } from 'asterui'

Exemplos

Básico

Popconfirm simples com 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

Com Descrição

Adiciona uma descrição para mais 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

Posicionamentos

Popconfirm pode ser colocado em diferentes posições.

</>

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 Customizado

Customize texto e tipos dos botões.

</>

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

Confirmação Assíncrona

Lida com operações assíncronas com estado de carregamento.

</>

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

Ícone Customizado

Customize ou oculte o ícone.

</>

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

Sem Botão Cancelar

Oculta o botão cancelar para confirmações somente de reconhecimento.

</>

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

Desabilitado

Popconfirm desabilitado.

</>

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

Propriedade	Descrição	Tipo	Padrão
children	Elemento gatilho	React.ReactElement	-
title	Título da confirmação	React.ReactNode	-
description	Texto de descrição	React.ReactNode	-
onConfirm	Callback quando confirmado (suporta async)	() => void | Promise<void>	-
onCancel	Callback quando cancelado	() => void	-
okText	Texto para botão confirmar	string	'OK'
cancelText	Texto para botão cancelar	string	'Cancel'
okType	Tipo do botão confirmar	'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error' | 'info'	'primary'
cancelType	Tipo do botão cancelar	'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error' | 'info' | 'ghost'	'ghost'
placement	Posicionamento do popup de confirmação	'top' | 'bottom' | 'left' | 'right'	'top'
disabled	Se o popconfirm está desabilitado	boolean	false
icon	Ícone customizado (null para ocultar padrão)	React.ReactNode	-
showCancel	Mostrar botão cancelar	boolean	true

Acessibilidade

• Foco é capturado dentro do popconfirm quando aberto
• Tecla Escape fecha o popconfirm
• Botões são acessíveis por teclado
• Estado de carregamento é comunicado via aria-busy