Severity
A four-level threat or impact scale (critical, high, elevated, routine) with its own tokens and a shape per level, separate from system status.
npx prodular-ui add severityLevels
Plain for lists and sentences, pill for tables, solid for the one thing that must stand out.
plainCriticalHighElevatedRoutine
pillCriticalHighElevatedRoutine
solid
import { Severity, severityLevels } from "@/components/ui/severity"
export default function SeverityLevels() { return ( <div className="grid gap-4 sm:grid-cols-3"> {(["plain", "pill", "solid"] as const).map((appearance) => ( <div key={appearance} className="flex flex-col items-start gap-2"> <span className="text-(length:--text-ui) text-muted-foreground capitalize">{appearance}</span> {severityLevels.map((s) => ( <Severity key={s.level} level={s.level} appearance={appearance} /> ))} </div> ))} </div> )}Anatomy
<Severity level="high" appearance="pill" />Guidance
Use it when
- How serious something is: incidents, threats, risks, findings.
- The same level and shape on the map, the graph, the table and the legend.
- severityOf(level).token with tokenColor() for canvas and map renderers.
Avoid
- Severity for system state (Running, Failed). Use Status.
- Chart colors for severity. Use the severity tokens.
- Solid for more than one item in a view.
Rules for AI agents
Published in llms-full.txt, the registry and the MCP server, so coding agents follow them when they build with this component.
- Map impact to levels consistently: critical acts now, high acts today, elevated needs watching, routine needs nothing.
- Keep the label. SeverityIcon alone only next to text that names the level.
- Draw the same shape as SeverityIcon on maps and graphs (severityOf(level).shape), so severity never relies on color alone.
- Use the severity-* color tokens (bg-severity-high-subtle, text-severity-critical) instead of red or orange classes.
API
Severity
| Prop | Type | Default | Description |
|---|---|---|---|
| level | "critical" | "high" | "elevated" | "routine" | The level. | |
| appearance | "plain" | "pill" | "solid" | "plain" | Text with a shape, a tinted pill, or a solid pill. |
| size | "default" | "sm" | "xs" | "default" | Type size. |
severityOf
| Prop | Type | Default | Description |
|---|---|---|---|
| (level) | { label, token, shape } | Token and shape for custom renderers. |
Installation
The Prodular UI CLI adds the source to components/ui with everything it depends on. In a project that already uses shadcn/ui, the shadcn CLI installs it from the Prodular registry too. See Installation for the first setup.
npx prodular-ui add severity# or, with the registry in components.jsonnpx shadcn@latest add @prodular/severity