Component

Badge

Small labels for status, counts, and categories. Supports multiple variants and removable state.

tsx

import { Badge, StatusBadge, PriorityBadge, CountBadge } from 'wss3-forge'

Usage

•

Use for status indicators and labels

•

Add dot prop for status indicators

•

Use semantic variants (success, error, warning)

•

StatusBadge for predefined status types

•

CountBadge for notification counts

DefaultPrimarySuccessWarningError

OnlineAwayBusy

Examples

Variants

DefaultPrimarySuccessWarningErrorInfo

tsx

1<HStack gap="sm">
2  <Badge>Default</Badge>
3  <Badge variant="primary">Primary</Badge>
4  <Badge variant="success">Success</Badge>
5  <Badge variant="warning">Warning</Badge>
6  <Badge variant="error">Error</Badge>
7  <Badge variant="info">Info</Badge>
8</HStack>

With Dot Indicator

OnlineAwayBusy

tsx

1<HStack gap="sm">
2  <Badge dot variant="success">Online</Badge>
3  <Badge dot variant="warning">Away</Badge>
4  <Badge dot variant="error">Busy</Badge>
5</HStack>

Status Badges

ActivePendingCompletedError

tsx

1<HStack gap="sm">
2  <StatusBadge status="active" />
3  <StatusBadge status="pending" />
4  <StatusBadge status="completed" />
5  <StatusBadge status="error" />
6</HStack>

Count Badges

59999+

tsx

1<HStack gap="md">
2  <CountBadge count={5} />
3  <CountBadge count={99} />
4  <CountBadge count={150} max={99} />
5</HStack>

Removable Badges

ReactTypeScriptVite

tsx

1<HStack gap="sm">
2  <Badge onRemove={() => console.log('removed')}>React</Badge>
3  <Badge variant="primary" onRemove={() => {}}>TypeScript</Badge>
4  <Badge variant="success" onRemove={() => {}}>Vite</Badge>
5</HStack>

Avatar

Calendar

Last updated: December 2025