Open Status Badge Demo

Demonstrating the “Open Now” indicator with different scenarios

Current Status (9am-5pm Mon-Fri)

Open until 17:00
Open until 17:00
Open until 17:00

Always Open (24/7)

Open until 23:59
Open until 23:59
Open until 23:59

Always Closed

Closed today
Closed today
Closed today

Public Holiday (Closed)

Closed for Christmas
Closed for Christmas
Closed for Christmas

Public Holiday (Special Hours 10am-2pm)

Open until 14:00
Open until 14:00
Open until 14:00

On Dark Background (Storefront Hero)

Open until 17:00
Open until 23:59

Closing in 45 Minutes (Still Normal)

Default threshold is 30 minutes, so this shows as normal open state.

Currently closed
Currently closed
Currently closed

⚠️ Closing Soon - 20 Minutes (Warning State)

Amber/yellow warning appears when closing within threshold (default 30 min).

Currently closed
Currently closed
Currently closed

🚨 Closing in 10 Minutes (Urgent State)

Red urgent warning appears when closing within 15 minutes.

Currently closed
Currently closed
Currently closed

🔥 Closing in 5 Minutes (Very Urgent!)

Maximum urgency with pulsing animation.

Currently closed
Currently closed
Currently closed

Custom Threshold (60 minutes)

You can customize when the warning appears with closingSoonThreshold prop.

Currently closed
Currently closed

No Operating Hours Configured

Operating hours not configured
Operating hours not configured
Operating hours not configured

🔄 Live Countdown Badge

These badges auto-update every minute to show real-time countdown. Watch them change!

Currently closed
Currently closed
Currently closed

💡 Tip: Use LiveOpenStatusBadge on pages where users spend time browsing. The badge will automatically update every minute without page refresh, ensuring users always see accurate closing times.

Implementation Notes

  • Badge automatically checks current time against operating hours
  • Supports multiple time slots per day (e.g., split shifts with lunch break)
  • Public holiday hours override regular operating hours
  • Three size variants: compact, default, and large
  • Fully customizable with className prop for styling
  • NEW: “Closing Soon” warning states with color-coded urgency levels
  • NEW: Amber warning when closing within 30 minutes (customizable threshold)
  • NEW: Red urgent state when closing within 15 minutes
  • NEW: Shows exact minutes until closing (e.g., “Closing in 10 min”)
  • NEW: Alert icon appears during closing soon states
  • Shows “Open until [time]” when open normally, “Opens at [time]” when closed
  • Green indicator for open, amber for closing soon, red for urgent, gray for closed
  • Pulsing animation on badge and dot for visual urgency