Resource Badge
Displays a badge with consistent icons, colors, and labels for resource types.
Overview
The ResourceBadge component is a specialized badge wrapper that provides predefined configurations for displaying different resource types. It automatically applies appropriate icons, colors, and labels.
Usage
Import the component:
import { ResourceBadge } from "@eqtylab/equality";Basic usage requires only a type prop:
<ResourceBadge type="database" />Variants
With Icons (default)
Code
Compute
Database
Dataset
Document
Guard
Guardrail
Benchmark
Agent
Inference
Model
Prompt
System Prompt
Context
Reasoning
Token
Tools
System Parameters
Unknown
Label Only
Code
Compute
Database
Dataset
Document
Guard
Guardrail
Benchmark
Agent
Inference
Model
Prompt
System Prompt
Context
Reasoning
Token
Tools
System Parameters
Unknown
Icon Only
Display Options
With Icon and Label (Default)
The default display shows both icon and label:
<ResourceBadge type="model" />Icon Only
Show only the icon by setting display to "icononly":
<ResourceBadge type="database" display="icononly" />Label Only
Show only the text by setting display to "textonly":
<ResourceBadge type="inference" display="textonly" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
type | "agent" | "benchmark" | "code" | "compute" | "database" | "dataset" | "document" | "guard" | "inference" | "model" | "prompt" | "token" | "tools" | "unknown" | Required | The resource type that determines the badge variant, icon, and label. |
display | "both" | "textonly" | "icononly" | "both" | Controls what elements are displayed. "both" shows icon and text, "textonly" shows only text, "icononly" shows only icon. |