LiveBadge is the pulsing red LIVE pip used on broadcast surfaces — a tile corner, a webinar page header, the recording dashboard. Three sizes, optional viewer count, optional recording-active dot. Pure visual; no SDK wiring.
Install
pnpm add @levelchat/react-componentsBasic usage
import { LiveBadge } from '@levelchat/react-components';
<LiveBadge live size="md" viewerCount={1242} recording />Sizes
sm— chip-size, for tile corners.md— default, for header strips.lg— hero, for landing-page mocks + recording dashboards.
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
live | boolean | — | Required. When false the badge shows its "Ended" state. |
size | 'sm' | 'md' | 'lg' | md | Visual size step. |
viewerCount | number | — | Optional viewer count rendered next to the pip. |
recording | boolean | false | Render the secondary "recording active" dot. |