Status Badge

Overview

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).

Variations

Themes

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

Variants

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

• The 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: sm and md.

Icon support

The StatusBadge component supports an optional icon prop to display an icon inside the badge. icon is available on all variants except status.

Status badges

Status badges (the status variant) can optionally include a pulsing indicator to signal activity using the pulse prop.

Installation

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>

Usage

Anatomy

StatusBadge is a single, self-contained element — a small pill wrapping its text children, with an optional leading icon (non-status variants) or a pulsing status dot (the status variant).

<StatusBadge variant="status" theme="success" pulse>
  Online
</StatusBadge>

• variant sets the visual treatment (primary, secondary, outline, ghost, status).
• theme sets the color (muted by default).
• icon and pulse are mutually exclusive by variant: icon is available on every variant except status, and pulse is available only on status.

Best practices

Do

• Keep the label short — a word or two — so the badge stays compact and scannable.
• Match the theme to the meaning (success, warning, danger, …) so color reinforces the text.
• Use the status variant with pulse for live/real-time states (online, running); use the other variants for static labels.

Don’t

• Don’t use StatusBadge for anything clickable — it’s read-only. Use a button or link for actions.
• Don’t rely on color alone to carry meaning; the text should stand on its own.

Content

• Prefer a single clear state word (“Success”, “Failed”, “Running”) over full sentences.
• Use consistent capitalization across a set of badges.

Accessibility

Labeling

• The badge’s meaning comes from its visible text children, so always provide a clear label rather than relying on theme color alone.
• The pulsing status dot is decorative (aria-hidden) and adds no text for assistive tech — the label must convey the state.

Focus & states

• StatusBadge is non-interactive: it renders a plain element with no role, tab stop, or click handling, so it isn’t focusable and isn’t announced as a control.

Properties

Properties

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