Resource Badge

Overview

The ResourceBadge component is a specialized badge wrapper that provides predefined configurations for displaying different resource types as defined by integrity-py. 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

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 "icon-only":

<ResourceBadge type="database" display="icon-only" />

Label Only

Show only the text by setting display to "text-only":

<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.

Usage

<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

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

Props