MetricTile

Guidelines#

Use it for health readouts such as deliverability (inbox placement, warm-up score, spam rate).

What you provide: label, value as a string ("92%"; "—" when unknown), hint, tone (good ≥ 80 emerald, warn ≥ 60 amber, bad red, none muted) and isLoading. The value is 24px semibold; tone colours are -600 in light and -400 in dark. Say what the number is made of in the hint ("3 of 21 seeds").

Facts#

API#

TypeScript declarations emitted from src/features/settings/deliverability/ui/metric-tile.tsx.

export interface MetricTileProps {
    label: string;
    value: string;
    hint?: string;
    tone?: ScoreTone;
    isLoading?: boolean;
}
export declare function MetricTile({ label, value, hint, tone, isLoading }: MetricTileProps): 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: "grid grid-cols-4 gap-3" },
    h(DC.MetricTile, { label: "Inbox placement", value: "92%", tone: "good", hint: "Gmail + Outlook" }),
    h(DC.MetricTile, { label: "Warm-up score", value: "71", tone: "warn", hint: "Day 9 of 14" }),
    h(DC.MetricTile, { label: "Spam placement", value: "14%", tone: "bad", hint: "3 of 21 seeds" }),
    h(DC.MetricTile, { label: "Blacklists", value: "—", hint: "Not checked" }));
}
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>

More in Data display#