Componentes
ConfirmGate
Gate para ações irreversíveis: dinheiro, permissão, exclusão, execução de agente. Pode exigir motivo e palavra digitada.
estávelDiálogodesde 0.1.0@hiboupay/react
Exemplos#
Motivo obrigatório · palavra digitada · consentimento
Importar#
tsx
import { ConfirmGate } from "@hiboupay/react";
import type { ConfirmGateProps } from "@hiboupay/react";Quando usar#
Use quando
- Qualquer ação que não volta.
- Ação cujo motivo precisa ir para auditoria.
Não use quando
- Ação desfazível: execute e ofereça desfazer.
Variantes#
danger
Destrutiva (padrão).
warning
Arriscada, mas não destrutiva.
primary
Execução que precisa de consentimento.
success
Conclusão positiva irreversível.
Anatomia#
- 01Ícone de escudo com tom
- 02Título e consequência
- 03Conteúdo extra opcional
- 04Motivo (Textarea) opcional
- 05Palavra de confirmação (Input mono) opcional
- 06Cancelar (ghost) + Confirmar (tom)
Estados#
bloqueado (motivo ou palavra faltando)liberadoloading
API#
Props documentadas no registro. * indica obrigatória.
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| open / onOpenChange* | boolean / (open) => void | Controlado. | |
| title* | ReactNode | O que vai acontecer. | |
| description | ReactNode | Consequência. | |
| tone | "danger" | "primary" | "success" | "warning" | "danger" | Cor do ícone e do botão. |
| confirmLabel | string | "Confirmar" | Repita o verbo da ação. |
| cancelLabel | string | "Cancelar" | Rótulo do cancelar. |
| requireReason | boolean | false | Exige motivo de ao menos 3 caracteres. |
| reasonLabel | string | "Motivo (obrigatório)" | Rótulo do motivo. |
| reasonPlaceholder | string | Exemplo de motivo. | |
| requireTypedConfirm | string | Palavra exata a digitar (ex.: EXCLUIR). | |
| onConfirm* | ({ reason?: string }) => void | Promise<void> | Recebe o motivo. | |
| loading | boolean | Botão de confirmar em loading. |
Acessibilidade#
Teclado
EscCancela.
TabMotivo → Cancelar → Confirmar.
Leitor de tela
- —Herdado do Modal.
- —Botão desabilitado até cumprir as exigências.
Boas práticas#
Faça
- Diga a consequência em uma frase.
- Motivo quando a ação entra no histórico.
Evite
- "Tem certeza?" sem consequência.
- Confirmar com rótulo genérico.
Conteúdo#
- —Título: "Estornar pagamento". Descrição: "O valor volta ao cliente em até 2 dias. Não dá para desfazer."
Tokens#
Os tokens que desenham este componente. Clique para ver valor, variável e classe.