Skip to content
Docs

<Badge />

Badging is used to show that a user has an attestation attached to their account.

Usage

Badge with default colors:

code
import { Badge } from '@coinbase/onchainkit/identity';
<Badge />;

Badge with custom colors:

code
import { Badge } from '@coinbase/onchainkit/identity';
<Badge backgroundColor="#7DA1F8" borderColor="white" />;

Props

BadgeReact

Badge on <Name /> and <Avatar />

Badge with <Name />, best used when <Name /> are displayed alongside <Avatar /> components.

In both examples we use the Coinbase Verified Account schema ID to show the Coinbase verified badge on the Name and Avatar components.

code
import { base } from 'viem/chains';
import { OnchainKitProvider } from '@coinbase/onchainkit';
import { Name } from '@coinbase/onchainkit/identity';
 
const address = '0x838aD0EAE54F99F1926dA7C3b6bFbF617389B4D9';
const COINBASE_VERIFIED_ACCOUNT_SCHEMA_ID =
  '0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9';
 
<OnchainKitProvider chain={base} schemaId={COINBASE_VERIFIED_ACCOUNT_SCHEMA_ID}>
  <Name address={address} showAttestation />
</OnchainKitProvider>;

Badge with <Avatar />, best used when <Avatar /> is not paired with any labels.

code
import { base } from 'viem/chains';
import { OnchainKitProvider } from '@coinbase/onchainkit';
import { Avatar } from '@coinbase/onchainkit/identity';
 
const address = '0x838aD0EAE54F99F1926dA7C3b6bFbF617389B4D9';
const COINBASE_VERIFIED_ACCOUNT_SCHEMA_ID =
  '0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9';
 
<OnchainKitProvider chain={base} schemaId={COINBASE_VERIFIED_ACCOUNT_SCHEMA_ID}>
  <Avatar address={address} showAttestation />
</OnchainKitProvider>;