StatList

A dashboard's own findings summary ("Open risks with no owner: 3") or an audit-readiness check list — a list of rows, each a label and a trailing count rendered as a Badge, optionally a real <a> link. A count of 0 always reads a neutral badge, regardless of tone — a zero is never itself a finding.

Not a rebuild of one specific Attio widget (Attio's own Reports/Dashboards surface a bar/line/number report tile, not a findings list) — composed from already-measured crisp values throughout instead: the row-divider structure TaskList already uses, the type scale's own sizes, and Badge's own tone colours.

Installation

npm install @crisp-ui-kit/crisp

Usage

import { StatList } from "@crisp-ui-kit/crisp";

<StatList
  items={[
    { id: "a", label: "Open risks with no owner", count: 3, tone: "warning", href: "/risks?no_owner=true" },
    { id: "b", label: "Risks above appetite", count: 0 },
  ]}
/>;

Pair href with onClick for client-side routing (e.g. react-router's own Link), the same division of labour Link uses internally: href gives ordinary browser behaviour (open in a new tab, copy link, hover status), onClick calls event.preventDefault() and navigates client-side.

const navigate = useNavigate();

<StatList
  items={findings.map((f) => ({
    id: f.key,
    label: f.label,
    count: f.count,
    tone: f.count > 0 ? "danger" : undefined,
    href: f.to,
    onClick: (e) => {
      e.preventDefault();
      navigate(f.to);
    },
  }))}
/>;

Props

StatListItem = { id, label, count, tone?, href?, onClick? } — tone is one of Badge's own tones ("neutral" | "success" | "warning" | "danger" | "brand").