primitives

Chip

Severity / status pill. The only place colour means severity in the system — never use Chip for non-severity tags. For neutral metadata use `<Badge>` or a plain neutral Chip (no `severity` prop).

Two modes by design rule: severity-coloured (critical / high / medium / low) for object intrinsic severity, or neutral (no `severity`) for everything else — status, source, category, package state. Don't add a third variant.

Install

Pull this component (and its dependencies) straight into your app via the shadcn CLI:

npx shadcn@latest add https://design.oapps.io/r/chip.json

Or import from the workspace package:

import { Chip } from "@8maverik8/design";

Examples

Severity ramp

criticalhighmediumlow

<Chip severity="critical">critical</Chip>
<Chip severity="high">high</Chip>
<Chip severity="medium">medium</Chip>
<Chip severity="low">low</Chip>

Neutral

Default mode (no `severity`). Use for status, sources, categories.

proposedapprovedvantaaws

<Chip>proposed</Chip>
<Chip>approved</Chip>
<Chip>vanta</Chip>
<Chip>aws</Chip>

Variants

severity

criticalDestructive tint. Use only for severity-rated objects (vulnerabilities, incidents).
highWarning tint.
mediumSubdued warning.
lowMuted neutral.
(none)(default)Neutral chip — borders + muted text on transparent. Use for status, source, category, scope labels.

Guidelines

Use Chip with `severity` ONLY for objects that have intrinsic severity (vulnerabilities, alerts, incidents).Mixing severity colours with non-severity tags trains users that colour is decorative — they then ignore it where it matters.
Use Chip for counts.That's `<Badge>`. Chip carries categorical meaning, not cardinality.
Roll a parallel chip / pill / badge component locally.There must be exactly one chip component across all products to keep the visual grammar consistent.