OrganismosAlert Dialog

Alert Dialog

@velon-finance/ui · status: stable · organism · @radix-ui/react-alert-dialog

Para confirmações destrutivas. Não pode ser fechado clicando fora ou pressionando ESC. o usuário precisa escolher explicitamente Cancelar ou Ação.

Visão geral

Quando usar versus Dialog

  • AlertDialog. destrutivo ou irreversível: excluir conta, cancelar uma cobrança à força, confirmar uma transferência acima do limite.
  • Dialog. neutro ou construtivo: editar um perfil, ver detalhes, preencher um formulário.

Código

<AlertDialog>
  <AlertDialogTrigger asChild><Button variant="destructive">Delete</Button></AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you sure?</AlertDialogTitle>
      <AlertDialogDescription>This is permanent.</AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Delete</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>
Dialog V2Sheet