Status Icon
Compact dot or badge indicating online/offline status, verified accounts, or numeric notification counts. Typically overlaid on avatars.
import
{ StatusIcon } from "@pepulux/ui"All types
Four semantic types: online (green), offline (gray), verified (blue check), count (red badge).
Online
Offline
Verified
5Count
Count overflow — 9+
Counts above 9 are capped at '9+' to keep the badge compact.
3count=3
9count=9
9+count=42
Sizes
Pass size in pixels to scale the icon. Default is 16px.
12px
16px
20px
24px
Overlaid on avatars
Absolute-position StatusIcon over an avatar to indicate presence status.
A
A
V
3
3Props
| Prop | Type | Default | Description |
|---|---|---|---|
| type | "online" | "offline" | "verified" | "count" | "offline" | Semantic type controlling color and shape |
| count | number | — | Number shown when type='count'. Values >9 display as '9+'. |
| size | number | 16 | Icon diameter in pixels |
| className | string | — | Additional CSS classes — useful for positioning (e.g. absolute, ring) |