<Badge />
Use Badge
component along with Avatar
or Name
components to display user attestations attached to their account
Usage
Badge with default colors:
tsx
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:
import { Badge } from '@coinbase/onchainkit/identity';
<Badge
tooltip={true}
className="badge"
/>
With custom tooltip text:
import { Badge } from '@coinbase/onchainkit/identity';
<Badge
tooltip="Coinbase Verified Account"
className="badge"
/>
Props
Prop | Type | Description |
---|---|---|
className | string | Optional className override for top span element |
tooltip | boolean | string | Controls 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.
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.
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>