StatusBadge

The StatusBadge component is used to highlight and display small pieces of information, such as status indicators or labels. It supports multiple visual variants and color themes, and is non-interactive (read-only).

Usage

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

// ...

// Status badge with pulse
<StatusBadge variant="status" theme="success" pulse>Status</StatusBadge>

// Other variants (pulse not allowed)
<StatusBadge variant="primary" theme="info">Info</StatusBadge>
<StatusBadge variant="secondary" theme="warning">Warning</StatusBadge>
<StatusBadge variant="outline" theme="danger">Danger</StatusBadge>
<StatusBadge variant="ghost" theme="muted">Muted</StatusBadge>

Themes

The StatusBadge component supports different color themes, including muted (default), success, warning, danger, info, and merged.

Variants

The StatusBadge component supports different visual variants, including primary (default), secondary, outline, ghost, and status.

• status variant supports an optional pulse prop for animated status indication.
• For all other variants, the pulse prop is not allowed.

Sizes

The StatusBadge component comes in two sizes: default and sm.

Status StatusBadges

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

API Reference

The StatusBadge component has several props to control its appearance:

Prop	Required	Default	Type
variant	false	'primary'	'primary' | 'secondary' | 'outline' | 'ghost' | 'status'
theme	false	'muted'	'muted' | 'success' | 'warning' | 'danger' | 'info' | 'merged'
size	false	'default'	'default' | 'sm'
pulse	false	false	boolean
className	false		string
children	true		ReactNode