ComplianceTag
components/compliance/Tag.vue
Small compliance-framework tag: two-tone shield mark + framework name in a grape pill. `error` flips the whole tag red (red shield, error border/text) for a required-but-unmet framework; `removable` adds a ✕ that emits @remove. Shield art ships with the layer and carries its own colors (rendered via <img>, never UxIcon).
EU AI ActVariants (size × state)
EU AI ActEU AI Act
EU AI ActEU AI ActEU AI ActEU AI ActEU AI ActEU AI Act
EU AI ActEU AI ActGap cluster — one exclaim after the tags
OWASP LLMSOC 2HIPAARequiredScenarios
SOC 2OWASP LLMHIPAAISO 27001NIST SP 800-52 · TLS profile (2005, rev. 2)components/compliance/Tag.vue
Usage
<ComplianceTag
size = "medium"
:error = "false"
:gap = "false"
:removable = "false"
>
Content here
</ComplianceTag>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| size | String | 'medium' | 'small' | 'medium' — UxToggle-style size vocabulary; small drops to text-11 with h-3 shield/✕ |
| error | Boolean | false | Errored variant: red two-tone shield, error border/fill/text — loud failure |
| gap | Boolean | false | Muted grey variant (grey shield): required by an active framework while the policy is off. Pair the tag CLUSTER with one page-side exclaim circle after it. Wins over error |
| removable | Boolean | false | Show the trailing ✕ and emit @remove on click |
Events
| Event | Description |
|---|---|
| remove | The ✕ was clicked (only rendered when removable) |
Slots
| Slot | Description |
|---|---|
| default | The framework name/label |