CounterBadge

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>

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
theme	false	'default'	'default' | 'info' | 'success' | 'danger'
className	false		string
children	true		ReactNode