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:
tsx
import { ResourceBadge } from "@eqtylab/equality";Basic usage requires only a type prop:
tsx
<ResourceBadge type="database" />Variants
Display Options
With Icon and Label (Default)
The default display shows both icon and label:
tsx
<ResourceBadge type="model" />Icon Only
Show only the icon by setting display to "icon-only":
tsx
<ResourceBadge type="database" display="icon-only" />Label Only
Show only the text by setting display to "text-only":
tsx
<ResourceBadge type="inference" display="text-only" />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" | "text-only" | "icon-only" | "both" | Controls what elements are displayed. "both" shows icon and text, "text-only" shows only text, "icon-only" shows only icon. |