Badge

Overview

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

• Primary: The default style, suitable for general labeling.
• Secondary: Use after primary but information is of secondary (or equal) importance
• Neutral: For non-critical, informational, or secondary status.
• 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

Sizes

The Badge comes in two sizes. The default md size is 20px tall and should be used in most situations, while sm is 16px tall for use in tighter layouts where density is desired (such as log viewers). Small badges generally look better with pill={false} applied.

Usage

<Badge size="md">Medium (Default)</Badge>
<Badge size="sm">Small (Square)</Badge>
<Badge size="sm" pill={false}>Small (Square)</Badge>

Pill Shape

Badges are pill-shaped by default. Set pill={false} when using badges along with dense in-line text.

Usage

<Badge>Pill (Default)</Badge>
<Badge pill={false}>Square</Badge>

Display Modes

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

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

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.

Monospace

Use the monospace prop when badges will be rendered atop one another and their contents always or often share the same character count.

Usage

<Badge monospace>v1.3.0</Badge>

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.

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