Live Indicator
ProSmall badge component indicating a match is currently in progress. Displays a static coloured dot alongside a "LIVE" text label. No pulsing animation per enforced animation rules.
4 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | Dot + "LIVE" text label in the brand live colour. | Use alongside match scores or in fixture lists to indicate live matches. |
| Compact | Dot only with no text — for extremely tight spaces. | Use only when "LIVE" text is provided elsewhere in the same context. |
| With Time | Dot + current match minute (e.g., "LIVE 67'"). | Use when the elapsed time adds useful context. |
Usage Guidelines
Do
Always include "LIVE" as visible text — the dot is decorative.
Don't
Use a pulsing animation on the dot — it violates the enforced animation system.
Do
Use a static dot — no pulsing, bouncing, or scaling animations.
Don't
Use colour alone to indicate "live" status — text label required.
Do
Position consistently across all match-related components.
Don't
Display the live indicator after a match ends — remove it promptly.
Code
Design Tokens
Accessibility
- Dot uses aria-hidden="true" — text label is the accessible indicator.
- aria-label on the container provides full context.
- No animation — static dot only (enforced rules).