NetworkState Component

Network State Examples

Basic Sizes

xs

sm

md

lg

xl

<NetworkState size="xs" />

<NetworkState size="sm" />

<NetworkState size="md" />

<NetworkState size="lg" />

<NetworkState size="xl" />

With Network Type Icon

Shows the connection type (WiFi, Cellular, Ethernet, Bluetooth, etc.)

xs

sm

md

lg

xl

<NetworkState size="md" showType />

💡 The network type icon automatically detects your connection: WiFi 📶, Cellular 📱, Ethernet 🔌, Bluetooth 🔵, etc.

Custom Text Labels

Default texts

Hover to see tooltip

Custom texts

Hover to see tooltip

French texts

Survoler pour voir l'info-bulle

Status text

Hover to see tooltip

<NetworkState

    onlineText="Connected"

    offlineText="Disconnected"

    onlineLabel="Network online"

    offlineLabel="Network offline"

/>

Real-World Use Cases

1. Navigation Bar

2. System Status Card

System Status

Network

API ServerOperational

DatabaseOperational

3. Footer with Connection Status

4. Connection Alert Banner

Limited Connectivity

Some features may be unavailable offline

5. Badge with Network Status

Live

Connected

WiFi

6. User Menu Dropdown

// Navbar

<NetworkState size="sm" showType />

// Footer

<NetworkState size="xs" />

// Badge

<Badge className="gap-2">

    <NetworkState size="xs" />

    <span>Live</span>

</Badge>

Interactive Demo

Test Connection Status

Try toggling your network connection on/off to see the indicator change in real-time!

Current Status

The indicator reflects your actual network state

Network Details

Status:

Type:

Detection:Real-time

Props Reference

Prop	Type	Default	Description
`size`	string	'md'	Size variant: xs, sm, md, lg, xl
`showType`	boolean	false	Show network type icon (WiFi, Cellular, etc.)
`onlineText`	string	'Online'	Tooltip text when online
`offlineText`	string	'Offline'	Tooltip text when offline
`onlineLabel`	string	'Network online'	Aria-label when online (accessibility)
`offlineLabel`	string	'Network offline'	Aria-label when offline (accessibility)
`path`	string	-	i18n path for labels (e.g., "network.status")
`className`	string	-	Additional CSS classes

Features

Real-time Detection

Automatically detects online/offline state using browser APIs

SSR Safe

No hydration mismatch - defaults to online until mounted

Network Type

Detects WiFi, Cellular, Ethernet, Bluetooth, and more

i18n Support

Full internationalization with custom path support