CounterBadge

beta

The CounterBadge component is used to highlight and display numerical values or simple count indicators. It is designed to be non-interactive (read-only) and supports different color themes.

Usage

import { CounterBadge } from '@harnessio/ui/components'

// ...

// Default counter badge
<CounterBadge>1</CounterBadge>

// Info theme counter badge
<CounterBadge theme="info">42</CounterBadge>

// Success theme counter badge
<CounterBadge theme="success">10</CounterBadge>

// Danger theme counter badge
<CounterBadge theme="danger">99+</CounterBadge>

Variants

The CounterBadge component supports two variants: outline (default) and secondary.

Outline Variant

The outline variant provides a subtle border-based appearance, ideal for secondary information display.

Secondary Variant

The secondary variant uses a soft background appearance for more prominent display while maintaining subtlety.

Variant Comparison

Compare both variants side by side to see the visual differences:

Themes

The CounterBadge component supports four color themes that can be categorized into different groups based on their semantic meaning.

Theme Categories

Neutral Indicators

Neutral indicators are used for displaying general counts or values that don’t carry specific positive or negative connotations.

Status Indicators

Status indicators communicate the nature of the change or value - whether it represents an improvement (success) or a concern (danger).

API Reference

The CounterBadge component has the following props to control its appearance:

Prop	Required	Default	Type
variant	false	'outline'	'outline' \| 'secondary'
theme	false	'default'	'default' \| 'info' \| 'success' \| 'danger'
className	false		string
children	true		ReactNode