cosmemilton-ui/clientFeedback & overlays

CmConfirmDialog

Use quando a pagina controla a abertura do dialogo e precisa coordenar loading, cancelamento e confirmacao.

Import

tsx
import { CmConfirmDialog } from "cosmemilton-ui/client";

Confirmacao controlada

tsx
"use client";

import { useState } from "react";
import { CmButton, CmConfirmDialog } from "cosmemilton-ui/client";
import { CmText } from "cosmemilton-ui/server";

export default function Example() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <CmButton tone="danger" onClick={() => setOpen(true)}>
        Cancelar contrato
      </CmButton>
      <CmConfirmDialog
        open={open}
        onClose={() => setOpen(false)}
        onConfirm={() => setOpen(false)}
        title="Cancelar contrato?"
        description="Essa acao interrompe cobrancas futuras."
        confirmLabel="Cancelar contrato"
        tone="danger"
      >
        <CmText tone="muted">
          Os acessos permanecem ativos ate o fim do ciclo ja faturado.
        </CmText>
      </CmConfirmDialog>
    </>
  );
}

API rapida

CmConfirmDialog

openonCloseonConfirmtitletonesubmitting