Badge

A general-purpose label.

Default Default (Ghost)

<template>
  <Badge variant="default">New</Badge>
</template>

Props

Name	Type	Default
variant	"default" \| "success" \| "warning" \| "error"	"default"
fill	"default" \| "ghost"	"default"
size	"sm" \| "md"	"sm"

Name	Description
default	Badge label.
leftIcon	Icon before the label. Figma models this as a leftIcon boolean + fixed icon; adapted to a slot to match this codebase's existing icon-slot pattern.
rightIcon	Icon after the label.

Success, warning, and error states — each filled with a border in its own color.

Success Warning Error

<template>
  <Badge variant="success">Success</Badge>
  <Badge variant="warning">Warning</Badge>
  <Badge variant="error">Error</Badge>
</template>

A fixed-label badge for a finding's severity level.

Low Medium High Critical Information Invalid

<template>
  <SeverityBadge severity="critical" />
</template>

Name	Type	Default
severity	"low" \| "medium" \| "high" \| "critical" \| "informational" \| "invalid"	"low"

Name	Description
leftIcon	Icon before the label.
rightIcon	Icon after the label.

A colored dot and label for showing a status, with an optional pulse for in-progress states.

Running Completed Triaging Failed Cancelled Draft

<template>
  <StatusBadge color="blue" :animate="true">Running</StatusBadge>
</template>

Name	Type	Default
color	"blue" \| "green" \| "yellow" \| "red" \| "gray" \| "orange"	"gray"
animate	boolean	false

Name	Description
default	Status label text.