Live Indicator
Eight ways to show a live match: badges, dots, pulses, broadcast signals and match clocks. Includes color, size, paused and finished states.
Eight live treatments
Compare the styles, switch color and match state, or pause motion. Every variant respects reduced motion.
Classic badge
Small, bold, unmistakable.
Dot & text
A quiet inline status.
Pulse
One steady dot. A soft ripple.
Soft badge
A little color, less weight.
Outline
For dense market lists.
Broadcast
A gently breathing signal.
Split clock
Status and time, together.
Touchline
A slim animated edge.
Sample match times. Motion stops at half-time and full time, and follows your reduced-motion preference.
In a match list
The same status treatments in football, basketball and tennis rows. Scores and times are illustrative.
Football · Premier League
Live, 67′Basketball · NBA
Live, Q3 08:42Tennis · Singles
Live, Set 2Illustrative scores. Pass the clock, period or set from your match feed. “Live” describes the match, not stream availability or whether betting is open.
States and sizes
Half-time, stoppage time, rain delay and full time. Time is supplied by your app, not calculated by the indicator.
Match lifecycle
Small (default), Medium, and motion off
Text carries the status even without color or motion. Labels can be localized or changed for your sport.
pnpm dlx shadcn@latest add https://betui.fyi/r/live-indicator.json