# Severity Badge

Shows the severity level of an alert, a vulnerability or a finding, with its label.

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

function SeverityBadgeDemo() {
  return (
    <>
      <SeverityBadge level="critical" />
      <SeverityBadge level="high" />
      <SeverityBadge level="medium" />
      <SeverityBadge level="low" />
      <SeverityBadge level="unknown" />
    </>
  )
}
```

## Usage

```tsx
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](/patterns/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](/patterns/description-list). Its fills follow the
soft status tones of [Badge](/components/badge) and [Alert](/components/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.

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

function SeverityBadgeSoft() {
  return (
    <>
      <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.

```tsx
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@zenoxai/ui/components/table"
import { SeverityBadge } from "@zenoxai/ui/patterns/severity-badge"

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

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

### SeverityBadge

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| label | `string` |  | Already-translated label. Defaults to the English level name. |
| level (required) | `"high" \| "low" \| "critical" \| "medium" \| "unknown"` |  |  |
| variant | `"soft" \| "dot"` | `dot` | `dot` (default) is a colored dot before the label, for tables and lists. `soft` is a tinted pill, for detail grids where the level is a value of its own. |