Ravox KitSobreposição
Confirmação
Pergunta com a consequência e duas saídas, para ações que não têm volta. Não fecha clicando fora, carrega enquanto a ação roda e mostra o erro sem fechar. Também sai como promessa: await confirmar({ … }).
Ajustes
Variante
Exemplos
Com promessa: await confirmar()
- #4821 · Marina Costa
- #4820 · Diego Alves
- #4817 · Lia Tanaka
Digitar o nome para confirmar
Sem volta, mas não destrutiva
Instalação
O shadcn cria components/ui/confirmacao.tsx no seu projeto e instala o tema junto. O arquivo é seu: edite à vontade.
npx shadcn@latest add https://ui.ravoxlabs.com/r/confirmacao.jsonOpções
| Opção | Tipo | Padrão | O que faz |
|---|---|---|---|
| titulo | ReactNode | — | A pergunta, com o objeto: "Excluir o projeto Loja Aurora?". |
| descricao | ReactNode | — | A consequência: o que acontece e se dá para desfazer. |
| textoConfirmar | string | "Confirmar" | O verbo da ação ("Excluir projeto"), nunca "OK". |
| textoCancelar | string | "Cancelar" | Texto da saída segura. |
| variante | "padrao" | "destrutivo" | "padrao" | Destrutivo: botão rosa, ícone de alerta e o foco começa em Cancelar. |
| aoConfirmar | () => unknown | Promise<unknown> | — | Roda ao confirmar. Se devolver promessa, o botão carrega e o diálogo espera; se ela falhar, a mensagem do erro aparece e nada fecha. |
| confirmarDesabilitado | boolean | false | Trava o botão de confirmar (ex.: até a pessoa digitar o nome do que vai apagar). |
| aoCancelar | () => void | — | Chamado quando a pessoa desiste (botão ou Esc). |
| gatilho | ReactElement | — | Elemento que abre a confirmação (um <Botao>). |
| aberto / padrao / aoMudar | boolean / boolean / (aberto) => void | — | Controlado ou não, como no Diálogo. |
| children | ReactNode | — | Conteúdo extra entre a descrição e os botões (o que será apagado, um campo de confirmação). |
| useConfirmacao() | (opcoes) => Promise<boolean> | — | Pede confirmação de qualquer lugar e espera a resposta. Precisa de um <ConfirmacaoProvedor> perto da raiz. |