Carregando…Carregando…Carregando…Carregando…Button with double-click or hold-to-confirm interaction to prevent accidental actions.
Confirm Button — double-click or hold to confirm
$ npx kikitocn add confirm-button@/lib/utilsimport { ConfirmButton } from "@/components/ui/cn/confirm-button/ConfirmButton";
export function ConfirmButtonExample() {
return (
<ConfirmButton />
);
}| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
children* | ReactNode | — | Conteúdo do botão |
onConfirm* | () => void | — | Callback após a confirmação |
mode | 'doubleclick' | 'hold' | 'doubleclick' | Modo de confirmação |
confirmLabel | string | undefined | Texto durante o estado de confirmação pendente |
holdDuration | number | 1500 | Duração do hold em ms (modo hold) |
intent | 'primary' | 'secondary' | 'danger' | 'success' | 'warning' | 'primary' | Cor do botão |
variant | 'solid' | 'outline' | 'soft' | 'solid' | Estilo visual do botão |
resetDelay | number | 2000 | Ms para resetar o estado de confirmação pendente |