SecuritySeverityTag
components/security/SeverityTag.vue
Severity pill on the ComplianceTag chassis — no icon, severity palette. The canonical tag-scale severity ladder: critical is the only solid fill (rank by intensity, not a fifth hue), high is error outline, medium warning outline, low muted grey. Label defaults to the severity word; override via the default slot.
high
Scenarios
criticalhighmediumlow
criticalhighmediumlow
crit!H
criticalhighmediumlow← ink, on the open-row tint
medium — 3 findings past their 90-day remediation targetC-2001highagent: Claude Code · sofia11d / 30d
components/security/SeverityTag.vue
Usage
<SecuritySeverityTag
severity = "—"
size = "medium"
:ink = "false"
>
Content here
</SecuritySeverityTag>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| severity | String | — | Severity level: 'critical' | 'high' | 'medium' | 'low' (required; unknown values fall back to the low palette) |
| size | String | 'medium' | 'small' | 'medium' — UxToggle-style size vocabulary; small drops to text-11 |
| ink | Boolean | false | Open-row register (the table-list _darken-me treatment): content-ink border/text on a 10% content fill, severity hue dropped — theme-safe (content token flips in dark mode). Flip from UxTableListExpandRow's @detailsOpen/@detailsClose |
Slots
| Slot | Description |
|---|---|
| default | Label override — defaults to the capitalized severity word |