Badge

The Badge component is used to highlight and display small pieces of information, such as status indicators, counts, or labels.

Usage

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

// ...

return <Badge theme="theme" variant="surface">My badge</Badge>

Themes

The Badge component supports different color themes, including default, success, warning, danger, info, primary, merged, and ai.

Variants

The Badge component supports different visual variants, including surface, soft, solid, status, and counter.

Sizes

Badge come in two sizes: default and sm.

Status Badges

Status badges can optionally include a pulsing indicator to indicate activity using the pulse prop.

AI Badge

The AI theme badge has a special appearance and doesn’t require a variant.

API Reference

The Badge component has several props to control its appearance:

<Badge
  variant="surface"    // [OPTIONAL] Visual style of the badge, can be 'surface' | 'soft' | 'solid' | 'status' | 'counter'
  theme="muted"        // [OPTIONAL] Color theme of the badge, can be 'muted' | 'success' | 'warning' | 'danger' | 'info' | 'merged' | 'ai' | 'primary'
  size="default"       // [OPTIONAL] Size of the badge, can be 'default' | 'sm'
  pulse                // [OPTIONAL] Whether the status indicator should pulse (only for status variant)
  className="my-class" // [OPTIONAL] Additional CSS class names
>
  Badge content
</Badge>

Prop	Required	Default	Type
variant	false	'surface'	'surface' | 'soft' | 'solid' | 'status' | 'counter'
theme	false	'muted'	'muted' | 'success' | 'warning' | 'danger' | 'info' | 'merged' | 'ai' | 'primary'
size	false	'default'	'default' | 'sm'
pulse	false	false	boolean
className	false		string
children	true		ReactNode