---
title: "Resource Badge"
description: "Displays a badge with consistent icons, colors, and labels for resource types."
source: "Equality"
---
import { ResourceBadge, PanelLabel } from "@eqtylab/equality";

## Overview

The `ResourceBadge` component is a specialized badge wrapper that provides predefined configurations for displaying different resource types as defined by [integrity-py](https://github.com/eqtylab/integrity-py). 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

<div className="grid grid-cols-[auto_auto_auto] gap-6">
  <div className="flex flex-col items-start space-y-3">
    <PanelLabel label="With Icons (default)" />
    <ResourceBadge type="code" />
    <ResourceBadge type="binary" />
    <ResourceBadge type="config" />
    <ResourceBadge type="compute" />
    <ResourceBadge type="database" />
    <ResourceBadge type="dataset" />
    <ResourceBadge type="document" />
    <ResourceBadge type="media" />
    <ResourceBadge type="skill" />
    <ResourceBadge type="guardrail" />
    <ResourceBadge type="benchmark" />
    <ResourceBadge type="benchmark-result" />
    <ResourceBadge type="agent" />
    <ResourceBadge type="model" />
    <ResourceBadge type="prompt" />
    <ResourceBadge type="system-prompt" />
    <ResourceBadge type="reasoning" />
    <ResourceBadge type="token" />
    <ResourceBadge type="certificate" />
    <ResourceBadge type="credential" />
    <ResourceBadge type="tool" />
    <ResourceBadge type="unknown" />
  </div>
  <div className="flex flex-col items-start space-y-3">
    <PanelLabel label="Label Only" />
    <ResourceBadge type="code" display="text-only" />
    <ResourceBadge type="binary" display="text-only" />
    <ResourceBadge type="config" display="text-only" />
    <ResourceBadge type="compute" display="text-only" />
    <ResourceBadge type="database" display="text-only" />
    <ResourceBadge type="dataset" display="text-only" />
    <ResourceBadge type="document" display="text-only" />
    <ResourceBadge type="media" display="text-only" />
    <ResourceBadge type="skill" display="text-only" />
    <ResourceBadge type="guardrail" display="text-only" />
    <ResourceBadge type="benchmark" display="text-only" />
    <ResourceBadge type="benchmark-result" display="text-only" />
    <ResourceBadge type="agent" display="text-only" />
    <ResourceBadge type="model" display="text-only" />
    <ResourceBadge type="prompt" display="text-only" />
    <ResourceBadge type="system-prompt" display="text-only" />
    <ResourceBadge type="reasoning" display="text-only" />
    <ResourceBadge type="token" display="text-only" />
    <ResourceBadge type="certificate" display="text-only" />
    <ResourceBadge type="credential" display="text-only" />
    <ResourceBadge type="tool" display="text-only" />
    <ResourceBadge type="unknown" display="text-only" />
  </div>
  <div className="flex flex-col items-start space-y-3">
    <PanelLabel label="Icon Only" />
    <ResourceBadge type="code" display="icon-only" />
    <ResourceBadge type="binary" display="icon-only" />
    <ResourceBadge type="config" display="icon-only" />
    <ResourceBadge type="compute" display="icon-only" />
    <ResourceBadge type="database" display="icon-only" />
    <ResourceBadge type="dataset" display="icon-only" />
    <ResourceBadge type="document" display="icon-only" />
    <ResourceBadge type="media" display="icon-only" />
    <ResourceBadge type="skill" display="icon-only" />
    <ResourceBadge type="guardrail" display="icon-only" />
    <ResourceBadge type="benchmark" display="icon-only" />
    <ResourceBadge type="benchmark-result" display="icon-only" />
    <ResourceBadge type="agent" display="icon-only" />
    <ResourceBadge type="model" display="icon-only" />
    <ResourceBadge type="prompt" display="icon-only" />
    <ResourceBadge type="system-prompt" display="icon-only" />
    <ResourceBadge type="reasoning" display="icon-only" />
    <ResourceBadge type="token" display="icon-only" />
    <ResourceBadge type="certificate" display="icon-only" />
    <ResourceBadge type="credential" display="icon-only" />
    <ResourceBadge type="tool" display="icon-only" />
    <ResourceBadge type="unknown" display="icon-only" />
  </div>
</div>

## 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="document" display="text-only" />
```

## Props

| Name      | Description                                                           | Type                                                                                                                                                                                                                                                                                                    | Default  | Required |
| --------- | --------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- |
| `type`    | The resource type that determines the badge variant, icon, and label. | `"agent"`, `"benchmark"`, `"benchmark-result"`, `"binary"`, `"certificate"`, `"code"`, `"compute"`, `"config"`, `"credential"`, `"database"`, `"dataset"`, `"document"`, `"guardrail"`, `"media"`, `"model"`, `"prompt"`, `"reasoning"`, `"skill"`, `"system-prompt"`, `"token"`, `"tool"`, `"unknown"` |          | ✅       |
| `display` | Controls what elements are displayed: icon, text, or both.            | `"both"`, `"text-only"`, `"icon-only"`                                                                                                                                                                                                                                                                  | `"both"` | ❌       |