Alert Dialog

Diálogo modal de confirmação para ações destrutivas ou que exigem decisão explícita. Inclui o utilitário promise-based `useConfirm` para uso programático.

Utilização

index.tsx
import {
  AlertDialog,
  AlertDialogTrigger,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogFooter,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogAction,
  AlertDialogCancel,
} from "@convertcompany/ui";

API promise-based — useConfirm

Para evitar espalhar AlertDialog em todo lugar, a lib expõe um provider que retorna uma função confirm() baseada em Promise. Ideal para chamadas inline em handlers.

Setup

Envolva sua aplicação com o ConfirmProvider:

app.tsx
import { ConfirmProvider } from "@convertcompany/ui";

export default function App() {
  return (
    <ConfirmProvider>
      <YourApp />
    </ConfirmProvider>
  );
}

Uso

component.tsx
import { useConfirm } from "@convertcompany/ui";

function DeleteButton({ id }: { id: string }) {
  const { confirm } = useConfirm();

  async function handleDelete() {
    const ok = await confirm({
      title: "Excluir conversa?",
      description: "Esta ação é irreversível. Todas as mensagens serão removidas.",
      confirmLabel: "Excluir",
      cancelLabel: "Manter",
      variant: "destructive",
    });
    if (ok) await api.deleteConversation(id);
  }

  return <Button variant="destructive" onClick={handleDelete}>Excluir</Button>;
}

A função confirm() retorna Promise<boolean> — true se o usuário confirmou, false se cancelou (incluindo ESC ou click outside).

Hook reduzido — useConfirmFn

Se você só precisa da função, sem isOpen ou cancel:

component.tsx
import { useConfirmFn } from "@convertcompany/ui";

const confirm = useConfirmFn();
const ok = await confirm({ title: "Tem certeza?" });

i18n — defaults no provider

Passe labels padrão no provider para integrar com i18n. Cada chamada de confirm() pode sobrescrever individualmente.

app.tsx
const { t } = useTranslation();

<ConfirmProvider
  defaults={{
    confirmLabel: t("common.confirm"),
    cancelLabel: t("common.cancel"),
  }}
>
  <App />
</ConfirmProvider>

Exemplos

Confirmação destrutiva

Confirmação positiva

Componentes

ComponenteDescrição
AlertDialogRoot do dialog (radix).
AlertDialogTriggerElemento que abre o dialog. Use asChild para envolver seu próprio botão.
AlertDialogContentContainer principal com overlay, animação e posicionamento centralizado.
AlertDialogHeader / AlertDialogFooterContainers de layout para header/footer.
AlertDialogTitle / AlertDialogDescriptionTítulo e descrição.
AlertDialogActionBotão de ação principal. Aceita prop variant (default default, geralmente destructive).
AlertDialogCancelBotão de cancelar. Aceita prop variant (default outline).

Props do AlertDialogAction / AlertDialogCancel

PropriedadeTipo
variantVariante visual do botão (vinda do `buttonVariants`).
default
destructive
outline
secondary
ghost
link
unstyled
classNameClasse CSS adicional.
string
...propsDemais props nativas do `<button>`.
ButtonHTMLAttributes<HTMLButtonElement>

Props do ConfirmProvider

PropriedadeTipo
defaultsLabels e variant padrão para todas as chamadas de confirm. Per-call sempre vence.
{ confirmLabel?: string; cancelLabel?: string; variant?: 'default' | 'destructive' }
childrenSua aplicação.
ReactNode

Opções de confirm(options)

PropriedadeTipo
titleTítulo do dialog.
ReactNode
descriptionDescrição secundária.
ReactNode
confirmLabelTexto do botão de confirmar. Sobrescreve provider defaults.
string
cancelLabelTexto do botão de cancelar.
string
variantVariant do botão de confirmação.
default
destructive