Skip to content

<Avatar />

The Avatar component is used to display ENS avatar associated with Ethereum addresses. When an ENS avatar is not available, it defaults to blue color avatar.

Usage

Address with an ENS avatar:

import { Avatar } from '@coinbase/onchainkit/identity';
<Avatar address="0x838aD0EAE54F99F1926dA7C3b6bFbF617389B4D9" /> 

Address without an ENS avatar, and it defaults to a plain avatar:

import { Avatar } from '@coinbase/onchainkit/identity';
<Avatar address="0x1234567890abcdef1234567890abcdef12345678" /> 

Override styles via className prop:

import { Avatar } from '@coinbase/onchainkit/identity';
<Avatar
  className="bg-white rounded-full"
  address="0x1234567890abcdef1234567890abcdef12345678"
/> 

Use defaultComponent prop to change the default avatar when ENS avatar is not found.

Use loadingComponent prop to change the loading placeholder:

import { Avatar } from '@coinbase/onchainkit/identity';
<Avatar
  address="0x1234567890abcdef1234567890abcdef12345678"
  loadingComponent={( 
    <div className="h-8 w-8">
      <svg width="100%" height="100%" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <polygon points="6,1 14,1 19,6 19,14 14,19 6,19 1,14 1,6" fill="yellow" stroke="yellow" stroke-width="1"/>
      </svg>
    </div> 
  )}
  defaultComponent={( 
    <div className="h-8 w-8">
      <svg width="100%" height="100%" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <polygon points="6,1 14,1 19,6 19,14 14,19 6,19 1,14 1,6" fill="green" stroke="green" stroke-width="1"/>
      </svg>
    </div> 
  )}
/>

Show attestation on ENV avatar with Badge component.

Use OnchainKitProvider or Identity component with the schemaId prop.

import { Avatar, Badge, Identity } from '@coinbase/onchainkit/identity'; 
 
<Identity
  schemaId="0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9"
  address="0x838aD0EAE54F99F1926dA7C3b6bFbF617389B4D9"
>
  <Avatar >
    <Badge />
  </Avatar>
</Identity>

Props

AvatarReact