Network Indicator
Compact badge that shows the selected network, connection status, and optionally the latest block number.
Introduction
NetworkIndicator displays the current network and connection status with an optional live block number. It is designed to be inline, non-stretching, and composable for toolbars, footers, and status rows.
Installation
npx polkadot-ui@latest add network-indicatorUsage
Network Indicator
Show current network and status
Network Indicator (no block number)
Hide the live block number
Network Indicator (no logo)
Hide the network logo
Network Indicator (finalized)
Follow the finalized head instead of best
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
chainId | string | yes | — | Network id to display (from your provider config) |
at | 'best' | 'finalized' | yes | 'finalized' | Which block stream to follow |
showBlockNumber | boolean | no | true | Show the block number next to the status dot |
showLogo | boolean | no | true | Show the network logo |
className | string | no | — | Extra classes for styling |
Accessibility
- Uses a tooltip to announce connection state changes.
- The block number area reserves space to prevent layout shift.