---
title: "Badge"
description: "Badge with sizes and variants"
source: "Equality"
---
import { Badge, PanelLabel } from "@eqtylab/equality";
import {
  BadgeClosableDemo,
  BadgeTruncateDemo,
} from "@demo/components/demo/badge";

## Overview

---

The Badge component comes with four color variants to visually communicate different statuses or contexts:

- **Neutral:** For non-critical, informational, or secondary status.
- **Primary:** The default style, suitable for general labeling.
- **Warning:** Indicates something that is worthy of more attention.
- **Danger:** Indicates an error or danger state that requires serious attention.
- **Success:** Represents positive outcomes or completed statuses.

For control compliance and resource types see [ControlStatusBadge](control-status-badge) and [ResourceBadge](resource-badge) respectively.

## Usage

---

Import the component:

```tsx
import { Badge } from "@eqtylab/equality";
```

`primary` is the default variant. Select another by using the `variant` prop, for example:

```tsx
<Badge variant="danger">Danger Badge</Badge>
```

## Basic Variants

---

<div className="grid grid-cols-[auto_auto_auto] gap-6">
  <div className="flex flex-col items-start space-y-3">
    <PanelLabel label="Badge Variant" />
    <Badge variant="neutral">Neutral</Badge>
    <Badge variant="primary">Primary</Badge>
    <Badge variant="warning">Warning</Badge>
    <Badge variant="danger">Danger</Badge>
    <Badge variant="success">Success</Badge>
  </div>
  <div className="flex flex-col items-start space-y-3">
    <PanelLabel label="With Icons" />
    <Badge variant="neutral" icon="Circle">
      Neutral
    </Badge>
    <Badge variant="primary" icon="Shield">
      Primary
    </Badge>
    <Badge variant="warning">Warning</Badge>
    <Badge variant="danger">Danger</Badge>
    <Badge variant="success">Success</Badge>
  </div>
  <div className="flex flex-col items-start space-y-3">
    <PanelLabel label="Icon Only" />
    <Badge variant="neutral" icon="Circle" display="icon-only" />
    <Badge variant="primary" icon="Shield" display="icon-only" />
    <Badge variant="warning" display="icon-only" />
    <Badge variant="danger" display="icon-only" />
    <Badge variant="success" display="icon-only" />
  </div>
</div>

## Display Modes

---

The Badge component supports three display modes to control what content is shown:

<div className="flex items-center gap-3">
  <Badge variant="primary" icon="Shield" display="both">
    Both (Default)
  </Badge>
  <Badge variant="primary" icon="Shield" display="text-only">
    Text Only
  </Badge>
  <Badge variant="primary" icon="Shield" display="icon-only" />
</div>

### Usage

```tsx
{
  /* Default - shows both icon and text */
}
<Badge variant="primary" icon="Shield">
  Both Icon and Text
</Badge>;

{
  /* Text only - hides the icon */
}
<Badge variant="primary" icon="Shield" display="text-only">
  Text Only
</Badge>;

{
  /* Icon only - hides the text */
}
<Badge variant="primary" icon="Shield" display="icon-only" />;
```

## Closable Variant

---

The closable variant of the Badge is commonly used to represent active filters or selections, such as when content is filtered by a search bar. This allows users to easily remove specific filters by clicking the close button on the corresponding badge.

<BadgeClosableDemo client:only="react" />

## Truncation

---

The Badge component supports text truncation for long content. Use the `truncate` prop to enable truncation, and optionally set a custom `truncateLength` (defaults to 50 characters). When text exceeds the specified length, it will be truncated with an ellipsis ("..."), and the full text will be displayed in a tooltip on hover. This is particularly useful for maintaining consistent badge sizes when displaying variable-length content.

<BadgeTruncateDemo client:only="react" />

## Icons

---

You can enhance your badge by displaying an icon. The `icon` prop accepts either a string corresponding to any [Lucide React](https://lucide.dev/icons/) icon key (such as `"Layers"` or `"CheckCircle"`), or you can provide a custom icon component. For custom icons, pass a React component or element to the `icon` prop.

<Badge icon="Layers">This is a badge</Badge>

### Usage

```tsx
// Using a Lucide React icon by name
<Badge icon="Layers">With Lucide Icon</Badge>

// Using a custom icon component
<Badge icon={<MyCustomIcon />}>With Custom Icon</Badge>
```

## Props

---

| Prop             | Type                                                                   | Default     | Description                                                                                                                       |
| ---------------- | ---------------------------------------------------------------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------- |
| `variant`        | `"neutral"` \| `"primary"` \| `"warning"` \| `"danger"` \| `"success"` | `"primary"` | The visual style variant of the badge.                                                                                            |
| `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. |
| `icon`           | `string` \| `ReactElement`                                             | -           | Icon to display. Can be a Lucide icon name or a custom React element.                                                             |
| `closeable`      | `boolean`                                                              | `false`     | When true, displays a close button on the badge.                                                                                  |
| `handleClosable` | `() => void`                                                           | -           | Callback function called when the close button is clicked. Required when `closeable` is true.                                     |
| `truncate`       | `boolean`                                                              | `false`     | When true, truncates long text with an ellipsis and shows full text on hover.                                                     |
| `truncateLength` | `number`                                                               | `50`        | Maximum character length before truncation occurs.                                                                                |
| `className`      | `string`                                                               | -           | Additional CSS classes to apply to the badge.                                                                                     |