Severity Badge

<>
  <SeverityBadge level="critical" />
  <SeverityBadge level="high" />
  <SeverityBadge level="medium" />
  <SeverityBadge level="low" />
  <SeverityBadge level="unknown" />
</>

Usage

import { SeverityBadge } from "@zenoxai/ui/patterns/severity-badge"

export function FindingSeverity() {
  return <SeverityBadge level="critical" />
}

Every Zenox security product shares one severity scale: critical, high, medium, low and unknown. The badge only renders a level. Map scores, priorities and CVSS bands to a level in the app, in one place, so the same score gets the same level on every screen.

label defaults to the English level name. Pass the translated name in any other locale.

For the state of a record in a workflow (new, in progress, resolved), use Status Badge.

Examples

Soft

The default dot variant is a colored dot before the label, for tables and lists where many rows sit together. soft is a tinted pill, for detail views where the level is a value of its own, such as a row of a Description List. Its fills follow the soft status tones of Badge and Alert: a critical pill has the danger fill and a medium one the warning fill, so severity and status chips side by side use the same reds and ambers.

<>
  <SeverityBadge level="critical" variant="soft" />
  <SeverityBadge level="high" variant="soft" />
  <SeverityBadge level="medium" variant="soft" />
  <SeverityBadge level="low" variant="soft" />
  <SeverityBadge level="unknown" variant="soft" />
</>

Missing severity

A record without a severity is missing information, not a level. Render a muted placeholder in the app’s empty-value style instead of level="unknown". Keep unknown for a severity the source reported as unknown or could not score.

function SeverityBadgeMissing() {
  const findings = [
    {
      id: "CVE-2024-3094",
      title: "Backdoor in xz-utils",
      severity: "critical",
    },
    {
      id: "CVE-2023-4863",
      title: "Heap overflow in libwebp",
      severity: "high",
    },
    {
      id: "ZNX-1182",
      title: "TLS certificate expires in 14 days",
      severity: "low",
    },
    { id: "ZNX-1190", title: "New open port detected: 8443", severity: null },
  ] as const

  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>ID</TableHead>
          <TableHead>Finding</TableHead>
          <TableHead>Severity</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {findings.map((finding) => (
          <TableRow key={finding.id}>
            <TableCell className="font-mono">{finding.id}</TableCell>
            <TableCell>{finding.title}</TableCell>
            <TableCell>
              {finding.severity ? (
                <SeverityBadge level={finding.severity} />
              ) : (
                <span className="text-text-muted">Not rated</span>
              )}
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  )
}

Accessibility

• The label always renders, so the level never depends on color alone. The dot is hidden from assistive technology.
• Pass a full word as label, not an initial (“C”, “H”). The label is the only cue that does not depend on color.
• severityBgClass and severityTextClass give the level’s fill and text color for charts and custom marks. Anything built with them needs the level in text too.

API reference

Generated from the TypeScript source. className, style and children are accepted everywhere and omitted below.