---
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" />
```

## Custom Content

By default, Resource Badge displays the label associated with the `type`. You can pass `children` to override that label.

This _may_ be used to display the name of a resource on the badge, though displaying names separately is generally preferred.

<div className="flex items-center gap-3">
  <ResourceBadge type="model">claude-opus-4-7</ResourceBadge>
  <ResourceBadge type="dataset">Dataset Group</ResourceBadge>
  <ResourceBadge type="credential">aws-prod-key</ResourceBadge>
</div>

### Usage

```tsx
<ResourceBadge type="model">claude-opus-4-7</ResourceBadge>
```

## Closable

Set `closeable` and provide a `handleClosable` callback to render a close button on the badge. This is useful for representing active filters or selections that the user can dismiss.

### Usage

```tsx
<ResourceBadge
  type="dataset"
  closeable
  handleClosable={() => removeFilter("dataset")}
>
  customer-events-2026
</ResourceBadge>
```

## 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"`   | ❌       |
| `children`       | Custom content to display in place of the default type label.                                                   | `ReactNode`                                                                                                                                                                                                                                                                                             |            | ❌       |
| `closeable`      | When true and `handleClosable` is provided, displays a close button on the badge.                               | `boolean`                                                                                                                                                                                                                                                                                               | `false`    | ❌       |
| `handleClosable` | Callback called when the close button is clicked. Required to render the close button when `closeable` is true. | `() => void`                                                                                                                                                                                                                                                                                            |            | ❌       |
| `closeLabel`     | Accessible label (`aria-label`) for the close button.                                                           | `string`                                                                                                                                                                                                                                                                                                | `"Remove"` | ❌       |