# Status Badge (`status-badge`) - SignalOS widget

> Severity badge with solid and translucent-chip appearances, plus reusable severity color helpers.

- **Version:** 0.1.5
- **Kind:** widget · **Category:** data-display
- **Install:** `npx shadcn@latest add @signalos/status-badge`
- **Registry dependencies (pulled automatically):** @signalos/tokens, @signalos/utils, @signalos/badge
- **npm dependencies:** none
- **Files installed:** `src/components/widgets/status-badge/StatusBadge.tsx`, `src/components/widgets/status-badge/StatusBadge.types.ts`

## Access

This is a private registry: pulling source requires a `SIGNALOS_REGISTRY_TOKEN`
(GitHub fine-grained PAT with read access to the signal-widgets repo) and an
`@signalos` entry in components.json `"registries"`. Previews and this document are public.

## Usage

```tsx
import { StatusBadge } from "@/components/widgets/status-badge/StatusBadge"
```

## Example

```tsx
// Example: severity badges plus the standalone helpers in a custom cell.
import {
  severityBorderClass,
  StatusBadge,
} from "@/components/widgets/status-badge/StatusBadge"
import type { Severity } from "@/components/widgets/status-badge/StatusBadge.types"

const incidents: Array<{ id: string; title: string; severity: Severity }> = [
  { id: "INC-31", title: "Queue backlog above threshold", severity: "high" },
  { id: "INC-29", title: "Nightly sync completed late", severity: "medium" },
  { id: "INC-27", title: "New connector online", severity: "info" },
]

export default function Example() {
  return (
    <div className="flex flex-col gap-3">
      {incidents.map((incident) => (
        <div
          key={incident.id}
          // The border helper works anywhere - cards, rows, callouts:
          className={`flex items-center justify-between rounded-lg border border-border border-l-2 bg-card p-3 ${severityBorderClass(incident.severity)}`}
        >
          <div className="flex items-center gap-3">
            <span className="font-mono text-xs text-muted-foreground">
              {incident.id}
            </span>
            <span className="text-sm text-foreground">{incident.title}</span>
          </div>
          <StatusBadge severity={incident.severity} />
        </div>
      ))}
    </div>
  )
}
```

## Props

### `Severity`

```ts
export type Severity =
  | "critical"
  | "high"
  | "medium"
  | "low"
  | "info"
  | "active"
  | "inactive"
  | "error"
```

### `StatusBadgeProps`

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `severity` | `Severity \| null \| undefined` | no | - | Severity driving color and default label. null/undefined renders a neutral "UNSET" badge. |
| `children` | `ReactNode` | no | - | Custom label; defaults to the uppercased severity. |
| `appearance` | `"solid" \| "chip" \| undefined` | no | `"solid"` | Visual style: "solid" uses badge tokens; "chip" uses the translucent 15%-tint style used inside stat cards and tables. |
| `className` | `string \| undefined` | no | - |  |
| `data-testid` | `string \| undefined` | no | - | Test identifier rendered as `data-testid` on the root element. |

## Changelog

## 0.1.5

- Fix cross-item imports to use canonical @/components paths; add missing signalos.category to manifests.

# status-badge

## 0.1.4

- Extend `Severity` type with `"active"`, `"inactive"`, and `"error"` values.
- Map new values through `severityLabel`, `severityToVariant`, `severityBadgeClasses`, and `severityBorderClass` using semantic tokens (`bg-bg-success/error/muted`, `border-l-status-*`).

## 0.1.3

- Add a `data-testid` passthrough on the root element so consumers can target the
  badge directly.

## 0.1.2

- Use semantic status tokens (text-text-error, bg-bg-warning, border-border-*, bg-status-*) instead of raw palette scales so client theme overrides restyle status colors.


## 0.1.1

- Content sync fix to bring source in line with published registry payload.


## 0.1.0

- Initial release. Severity helpers lifted from `signal-core-ui` `slot-card-utils.ts` and genericized:
  raw Tailwind palette classes (red/yellow/green/blue) normalized to token scales
  (`error-*`, `warning-*`, `success-*`, `info-*`); domain `BlackboardSeverity` replaced
  with a widget-owned `Severity` type.
- Component builds on the `@signalos/badge` primitive with `solid` and `chip` appearances.