Avatar

Usage

Avatar Design System Props

Props	Type	Type
src?	string	image source
type?	AvatarType	type of avatar
name?	EmojiNames	name to render emoji (use when type === AvatarType.Emoji)
size?	string	size for avatar
className?	string	class name for image
badge?	ReactNode	footer badge for avatar

Avatar Types

Props: avatarType?

Type: AvatarType.Image | AvatarType.NFT | AvatarType.Emoji

Default: AvatarType.Image

import { Avatar, FlexRow, AvatarType, EmojiNames } from "@ronin-nexus/atomic";
 
<FlexRow className="gap-4">
  <Avatar src={image} />
  <Avatar src={image} name={EmojiNames.HeartOnFire} type={AvatarType.Emoji} />
  <Avatar src={nft} type={AvatarType.NFT} />
</FlexRow>

Avatar Sizes

Props: size?

Type: xs | sm | md | lg | xl | 2xl

Default: md

<FlexRow className="gap-4">
  <Avatar src={image} size="xs" />
  <Avatar src={image} size="sm" name={EmojiNames.Hamburger} type={AvatarType.Emoji} />
  <Avatar src={nft} type={AvatarType.NFT} />
  <Avatar src={image} size="lg" />
  <Avatar src={image} size="xl" name={EmojiNames.Ghost} type={AvatarType.Emoji} />
  <Avatar src={nft} size="2xl" type={AvatarType.NFT}/>
</FlexRow>

Avatar With Footer

<FlexRow className="gap-4 items-start">
  <Avatar size="2xl" src={image} badge={<img src={ChainThumbnail.evm} className='w-1/3 h-auto aspect-square' />} />
  <Avatar src={image} name={EmojiNames.BeachWithUmbrella} type={AvatarType.Emoji} badge={<img src={ChainThumbnail.ton} className='w-1/3 h-auto aspect-square' />} />
</FlexRow>

Avatars With Group

<AvatarGroup>
  <Avatar src={image} />
  <Avatar src={image} />
  <Avatar src={image} />
  <Avatar src={image} />
  <Avatar src={image} />
  <Avatar src={image} />
</AvatarGroup>