HeroStat

betav0.1.0

A figure: 24px icon, value and label in a bordered pill, in a host row. `severity` tints the icon, and the value from low to critical; state it in text too. Omit it when the value is unknown. A long label truncates, whole in a Tooltip. Read-only; `asChild` makes it the host's link to the list it counts.

Open in Figma Machine contract (HeroStat.meta.ts)

Variants

Figma samples (8745:83987 / 8745:83988)

1 Occurrence

0 Impacted Assets

6.1 CVSS score

5 Stimulis

9 Stimulis

1 Asset groups

severity — tints the icon, and the figure from low to critical

9 neutral

9 info

9 low

9 medium

9 high

9 critical

asChild — the host's link (an <a> here, a router <Link> in a product): hover or Tab

9 neutral 9 info 9 low 9 medium 9 high 9 critical

disabled — a link the viewer cannot follow; still focusable, announced as disabled

4 Teams 6.1 CVSS score

In a Card: the row is the host's flex flex-wrap gap-2 (OpenAEV findings, 8745:64999)

CVE-2024-3094

Vulnerability

CVSS 6.1Medium criticality

1 Occurrences

0 Impacted assets

6.1 CVSS score

A label wider than its container truncates; hover it for the full text

12 Lorem ipsum dolor sit amet consectetur

Examples

<div className="flex flex-wrap gap-2">
  <HeroStat icon="list-ordered" value={occurrences} label={t("Occurrences")} severity="info" />
  <HeroStat icon="shield" value={cvss.toFixed(1)} label={t("CVSS score")} severity="medium" />
</div>

{/* linked: the router Link is the child */}
<HeroStat asChild icon="radar" value={injectsCount} label={t("Injects")}>
  <Link to={`/admin/scenarios/${scenarioId}/injects`} />
</HeroStat>

Props

Prop	Type
`value`	`React.ReactNode (required) — the figure, rendered as given: format it first.`
`label`	`string (required) — translated label; truncates, full text in a Tooltip.`
`icon`	`IconName (required) — 24px decorative glyph.`
`severity`	`"neutral" \| "info" \| "low" \| "medium" \| "high" \| "critical" (default "neutral") — tints the icon, and the value from low to critical.`
`asChild`	`boolean (default false) — the only child (the host's link: <a>, router <Link>) becomes the root; HeroStat renders icon, value and label inside it.`
`children`	`React.ReactElement — the link, asChild only; none: read-only, dev warning.`
`disabled`	`boolean (default false) — asChild only: aria-disabled, click, middle click and Enter blocked, stays focusable.`
`className`	`string — merged onto the root; other attributes and ref are forwarded to it.`

Accessibility

2.1 AAWCAG pass

Text in visual order ("9 Stimulis"); asChild: a link named so. Glyph aria-hidden. Dark/light on --bg-elevation-default: value 17.38/15.72, label 8.99/7.89, low 14.32/8.91, medium 14.16/8.95, high 11.96/10.80, critical 6.93/8.81. Hover fill, value;label dark, light: neutral 13.40;6.93, 12.17;6.11, info 14.51;7.50, 14.02;7.04, low 13.24;8.31, 8.28;7.33, medium 11.08;7.03, 8.58;7.56, high 10.76;8.09, 10.02;7.32, critical 6.58;8.55, 7.34;6.57. Ring 10.30/11.22. decorativeTints (§9 Q1): neutral 6.60/5.34, info 10.30/4.36, low 6.37/4.98, medium 11.30/1.54, high 6.19/4.32, critical 5.18/5.92. Disabled colours data-disabled gated. Focus: ring-offset-1, not -2, the node's 1px band (§9 Q10).