Badge

Badge with sizes and variants

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 and ResourceBadge respectively.

Usage

Import the component:

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

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

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

Basic Variants

Badge Variant

Neutral

Primary

Warning

Danger

Success

With Icons

Neutral

Primary

Warning

Danger

Success

Icon Only

Display Modes

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

Both (Default)

Text Only

Usage

{
  /* 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="textonly">
  Text Only
</Badge>;

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

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.

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.

Icons

You can enhance your badge by displaying an icon. The icon prop accepts either a string corresponding to any Lucide React 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.

This is a badge

Usage

// 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"` \| `"textonly"` \| `"icononly"`	`"both"`	Controls what elements are displayed. `"both"` shows icon and text, `"textonly"` shows only text, `"icononly"` 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.