Use Badge component along with Avatar or Name components to display user attestations attached to their account

​
Usage

Badge with default colors:

import { Badge } from '@coinbase/onchainkit/identity';
<Badge className="badge" />

Badge with custom colors:

import { Badge } from '@coinbase/onchainkit/identity';
<Badge className="bg-blue-400 border-white"/>

​
Badge with Tooltip

You can enable a tooltip for the attestation badge to provide context about what the badge represents:

// @noErrors: 2657
import { Badge } from '@coinbase/onchainkit/identity';

<Badge 
  tooltip={true}
  className="badge"
/>

With custom tooltip text:

// @noErrors: 2657
import { Badge } from '@coinbase/onchainkit/identity';

<Badge 
  tooltip="Coinbase Verified Account"
  className="badge"
/>

​
Props

BadgeReact

PropTypeDescription
classNamestringOptional className override for top span element
tooltipboolean | stringControls whether the badge shows a tooltip on hover. When true, displays the attestation name. When a string is provided, shows that custom text instead. Defaults to false

​
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.

// @noErrors: 2657
import { base } from 'viem/chains';
import { Badge, Name, Identity } from '@coinbase/onchainkit/identity';

const address = '0x838aD0EAE54F99F1926dA7C3b6bFbF617389B4D9';
const COINBASE_VERIFIED_ACCOUNT_SCHEMA_ID =
  '0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9';

<Identity
  className="bg-transparent"
  schemaId={COINBASE_VERIFIED_ACCOUNT_SCHEMA_ID}
  address={address}
>
  <Name address={address}>
    <Badge tooltip={true} /> {/* With tooltip that shows attestation name */}
  </Name>
</Identity>

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

// @noErrors: 2657
import { base } from 'viem/chains';
import { Avatar, Badge, Identity } from '@coinbase/onchainkit/identity';

const address = '0x838aD0EAE54F99F1926dA7C3b6bFbF617389B4D9';
const COINBASE_VERIFIED_ACCOUNT_SCHEMA_ID =
  '0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9';

<Identity
  className="bg-transparent"
  schemaId={COINBASE_VERIFIED_ACCOUNT_SCHEMA_ID}
>
  <Avatar address={address}>
    <Badge tooltip="Verified by Coinbase" /> {/* With custom tooltip text */}
  </Avatar>
</Identity>

Use Badge component along with Avatar or Name components to display user attestations attached to their account

​
Usage

Badge with default colors:

import { Badge } from '@coinbase/onchainkit/identity';
<Badge className="badge" />

Badge with custom colors:

import { Badge } from '@coinbase/onchainkit/identity';
<Badge className="bg-blue-400 border-white"/>

​
Badge with Tooltip

You can enable a tooltip for the attestation badge to provide context about what the badge represents:

// @noErrors: 2657
import { Badge } from '@coinbase/onchainkit/identity';

<Badge 
  tooltip={true}
  className="badge"
/>

With custom tooltip text:

// @noErrors: 2657
import { Badge } from '@coinbase/onchainkit/identity';

<Badge 
  tooltip="Coinbase Verified Account"
  className="badge"
/>

​
Props

BadgeReact

PropTypeDescription
classNamestringOptional className override for top span element
tooltipboolean | stringControls whether the badge shows a tooltip on hover. When true, displays the attestation name. When a string is provided, shows that custom text instead. Defaults to false

​
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.

// @noErrors: 2657
import { base } from 'viem/chains';
import { Badge, Name, Identity } from '@coinbase/onchainkit/identity';

const address = '0x838aD0EAE54F99F1926dA7C3b6bFbF617389B4D9';
const COINBASE_VERIFIED_ACCOUNT_SCHEMA_ID =
  '0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9';

<Identity
  className="bg-transparent"
  schemaId={COINBASE_VERIFIED_ACCOUNT_SCHEMA_ID}
  address={address}
>
  <Name address={address}>
    <Badge tooltip={true} /> {/* With tooltip that shows attestation name */}
  </Name>
</Identity>

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

// @noErrors: 2657
import { base } from 'viem/chains';
import { Avatar, Badge, Identity } from '@coinbase/onchainkit/identity';

const address = '0x838aD0EAE54F99F1926dA7C3b6bFbF617389B4D9';
const COINBASE_VERIFIED_ACCOUNT_SCHEMA_ID =
  '0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9';

<Identity
  className="bg-transparent"
  schemaId={COINBASE_VERIFIED_ACCOUNT_SCHEMA_ID}
>
  <Avatar address={address}>
    <Badge tooltip="Verified by Coinbase" /> {/* With custom tooltip text */}
  </Avatar>
</Identity>