ChainBadge
Compact chain indicator for network-specific instructions, examples, and warnings.
For isolated previews, theme switching, and sandbox editing, open the ChainBadge playground on holydocs.com .
When to use
Use this component when blockchain context, addresses, chains, token math, or wallet onboarding must stay precise and scannable.
Live Examples
Every example below renders the real component directly inside HolyDocs, followed by the exact MDX you can paste into a page.
Primary Networks
Render a few common networks inline to keep chain context obvious.
mdx<Columns cols={3}> <div><ChainBadge name="ethereum" /></div> <div><ChainBadge name="polygon" /></div> <div><ChainBadge name="base" /></div></Columns>
Testnet Callout
Useful when a page must clearly distinguish testnet-only instructions.
This guide deploys to Sepolia before you promote it to mainnet.
mdx<Callout type="warning" title="Testnet only"> This guide deploys to <ChainBadge name="sepolia" /> before you promote it to mainnet.</Callout>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
name | string | -- | Chain key to render, such as ethereum, base, or polygon. |
Usage
Start from this baseline shape and then tailor the copy, data, or nesting to the page you are writing.
mdx<Columns cols={3}> <div><ChainBadge name="ethereum" /></div> <div><ChainBadge name="polygon" /></div> <div><ChainBadge name="base" /></div></Columns>
Tips
- Use a chain badge near addresses, RPC URLs, and wallet actions. Network ambiguity is one of the easiest ways to create costly reader mistakes.
- Assume readers are one copy action away from using the value in production. Precision matters more than flair on web3 surfaces.
- Always make the target chain explicit when a component can imply a wallet, explorer, or transaction context.
Related Components
Readable wallet or contract address with truncation, copy-to-clipboard, and optional block-explorer deep link.
More
- Interactive playground: ChainBadge on holydocs.com
- Component library index: /components