Confirm Delete Button

Botão de exclusão com confirmação no próprio lugar, sem abrir diálogo. O primeiro clique na lixeira mostra "Confirmar" e um botão de cancelar (X). "Confirmar" executa a exclusão, e cancelar volta ao estado inicial.

Use em listas e menus, onde abrir um AlertDialog seria pesado demais para a ação. Para exclusões que não podem ser desfeitas e têm muito impacto, prefira o AlertDialog.

Exemplos

Padrão

onConfirm pode devolver uma Promise: enquanto ela não termina, a lixeira mostra o carregamento e os botões ficam bloqueados. Se ela resolver, o componente volta ao estado inicial. Se rejeitar, a confirmação continua aberta para o usuário tentar de novo ou cancelar, e mostrar o erro fica a cargo de quem usa.

Tamanhos

Controlado

Use confirming e onConfirmingChange quando o pai precisa saber se a confirmação está aberta, por exemplo para garantir que só uma linha fique em confirmação por vez. É assim que o TagPicker usa o componente.

const [pendingId, setPendingId] = useState(null);
 
<ConfirmDeleteButton
  label={`Excluir ${item.name}`}
  confirming={pendingId === item.id}
  onConfirmingChange={(confirming) => setPendingId(confirming ? item.id : null)}
  onConfirm={() => deleteItem(item.id)}
/>

Acessibilidade

• A lixeira e o "Confirmar" são o mesmo botão, então o foco continua nele quando a confirmação abre.
• Cancelar devolve o foco para a lixeira.
• Esc cancela a confirmação.
• Passe um label que diga o que será excluído ("Excluir tag Pediatria"), já que a lixeira só tem ícone.

API