Back to Dictionary
Empty & Error States
●○○Ready to Use
Offline State Indicator
A bar or toast that slides down from the top of the interface natively indicating the application has lost internet connection, remaining fixed until connection is restored.
Live Demo
Application Area
Toggle the offline state below to see how the application reacts to a loss of connectivity.
What It Is
A bar or toast that slides down from the top of the interface natively indicating the application has lost internet connection, remaining fixed until connection is restored.
✓When to Use
- Progressive Web Apps (PWAs)
- Real-time collaborative tools
✕When NOT to Use
- Static websites where offline doesn't break current reading
Configuration Tips
- 01Use a muted dark/gray or orange tone, not full destructive red
- 02Animate sliding down from y: -100%
You've Seen It In
FigmaSlackWhatsApp Web
Prompt Templates
Copy and paste these prompts into your AI coding assistant.
Create an offline notification bar that slides down from the top of the screen when the internet disconnects.
Code Example (Tailwind CSS)
export function OfflineIndicatorDemo() {}