EmailVerificationBadge

Guidelines#

Use it for prospect rows, contact details and pre-launch checks.

What you provide: status (deliverable, risky, undeliverable, unknown, or null for "Not checked"), score, showIcon. Deliverable is emerald with CheckCircle2, risky amber with AlertTriangle, undeliverable red with XCircle, unknown muted.

Facts#

API#

TypeScript declarations emitted from src/features/prospects/ui/components/email-verification-badge.tsx.

type VerificationStatus = "deliverable" | "risky" | "undeliverable" | "unknown";
/** Coerce a stored/free-text status into a known verification status, or null. */
export declare function normalizeVerificationStatus(status: string | null | undefined): VerificationStatus | null;
/**
 * Colored badge for an independent email-verification verdict, reused across the
 * detail view, prospect tables, and list detail. Renders "Not checked" when the
 * prospect has no verification result yet.
 */
export declare function EmailVerificationBadge({ status, score, className, showIcon, }: {
    status: string | null | undefined;
    score?: number | null;
    className?: string;
    showIcon?: boolean;
}): JSX.Element;

Example#

The code of the preview above: plain React.createElement against window.DigitalCrew, with realistic data.

<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
function App() {
  return h("div", { className: "flex flex-wrap items-center gap-2" },
    h(DC.EmailVerificationBadge, { status: "deliverable", score: 98 }),
    h(DC.EmailVerificationBadge, { status: "risky", score: 61 }),
    h(DC.EmailVerificationBadge, { status: "undeliverable" }),
    h(DC.EmailVerificationBadge, { status: "unknown" }),
    h(DC.EmailVerificationBadge, { status: null }));
}
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>

More in Data display#