AvatarGroup

Group of entity representations


import { AvatarGroup, Box, IconSparkles } from 'degen'

<AvatarGroup
  members={[
    { label: 'Noun 97', src: avatars.noun97 },
    { label: 'Noun 11', src: avatars.noun11 },
    { label: 'Noun 3', src: avatars.noun3 },
  ]}
/>

<AvatarGroup
  members={[
    { label: 'Noun 97', src: avatars.noun97 },
    { label: 'Noun 11', src: avatars.noun11 },
    { label: 'Noun 3', src: avatars.noun3 },
  ]}
/>

Props
#

See Avatar's props for more info.

name	type	default
as	"img" \| ComponentType<{}>	-
ensAvatarHook	EnsAvatarHook	-
hover	boolean	-
limit	number	3
members	{ label: string; placeholder?: boolean; src?: string; address?: string; }[]	[]
size	"20px" \| "24px"	24px
tag	string \| Element	-
tagTone	"background" \| "blue" \| "green" \| "orange" \| "pink" \| "purple" \| "red" \| "accent" \| "primary" \| "secondary"	-

Sizes
#

Limit
#

<AvatarGroup
  limit={3}
  members={[
    { label: 'Noun 97', src: avatars.noun97 },
    { label: 'Noun 11', src: avatars.noun11 },
    { label: 'Noun 3', src: avatars.noun3 },
    { label: 'Noun 17', src: avatars.noun17 },
    { label: 'Noun 2', src: avatars.noun2 },
    { label: 'Noun 102', src: avatars.noun102 },
  ]}
/>

<AvatarGroup
  limit={3}
  members={[
    { label: 'Noun 97', src: avatars.noun97 },
    { label: 'Noun 11', src: avatars.noun11 },
    { label: 'Noun 3', src: avatars.noun3 },
    { label: 'Noun 17', src: avatars.noun17 },
    { label: 'Noun 2', src: avatars.noun2 },
    { label: 'Noun 102', src: avatars.noun102 },
  ]}
/>

Custom Tag
#

<AvatarGroup
  limit={3}
  members={[
    { label: 'Noun 97', src: avatars.noun97 },
    { label: 'Noun 11', src: avatars.noun11 },
    { label: 'Noun 3', src: avatars.noun3 },
    { label: 'Noun 17', src: avatars.noun17 },
    { label: 'Noun 2', src: avatars.noun2 },
    { label: 'Noun 102', src: avatars.noun102 },
  ]}
  tag="Custom Tag"
/>

<AvatarGroup
  limit={3}
  members={[
    { label: 'Noun 97', src: avatars.noun97 },
    { label: 'Noun 11', src: avatars.noun11 },
    { label: 'Noun 3', src: avatars.noun3 },
    { label: 'Noun 17', src: avatars.noun17 },
    { label: 'Noun 2', src: avatars.noun2 },
    { label: 'Noun 102', src: avatars.noun102 },
  ]}
  tag="Custom Tag"
/>

Placeholder
#

<AvatarGroup
  limit={3}
  members={[
    { label: 'Noun 97', address: '0x62500C50fh999506597609B640F1D3672A0082Dc' },
    { label: 'Noun 11', address: '0x78Bddfs96cC5c0d6B506597609B64F1D999D82Dc' },
    { label: 'Noun 3', address: '0x625BBa96Cc5c0d6B506597609B64F1D3672D82Dc' },
  ]}
  tag="Custom Tag"
/>

<AvatarGroup
  limit={3}
  members={[
    { label: 'Noun 97', address: '0x62500C50fh999506597609B640F1D3672A0082Dc' },
    { label: 'Noun 11', address: '0x78Bddfs96cC5c0d6B506597609B64F1D999D82Dc' },
    { label: 'Noun 3', address: '0x625BBa96Cc5c0d6B506597609B64F1D3672D82Dc' },
  ]}
  tag="Custom Tag"
/>

Tag tone
#

<Stack align="flex-start">
  <AvatarGroup
    limit={3}
    members={[
      {
        label: 'Noun 97',
        address: '0x62500C50fh999506597609B640F1D3672A0082Dc',
      },
      {
        label: 'Noun 11',
        address: '0x78Bddfs96cC5c0d6B506597609B64F1D999D82Dc',
      },
      {
        label: 'Noun 3',
        address: '0x625BBa96Cc5c0d6B506597609B64F1D3672D82Dc',
      },
    ]}
    tag="Custom Tag"
    tagTone="accent"
  />

  <AvatarGroup
    limit={3}
    members={[
      {
        label: 'Noun 97',
        address: '0x62500C50fh999506597609B640F1D3672A0082Dc',
      },
      {
        label: 'Noun 11',
        address: '0x78Bddfs96cC5c0d6B506597609B64F1D999D82Dc',
      },
      {
        label: 'Noun 3',
        address: '0x625BBa96Cc5c0d6B506597609B64F1D3672D82Dc',
      },
    ]}
    tag="Custom Tag"
    tagTone="red"
  />

  <Box
    backgroundColor="foregroundTertiary"
    borderRadius="extraLarge"
    padding="8px"
  >
    <AvatarGroup
      limit={3}
      members={[
        {
          label: 'Noun 97',
          address: '0x62500C50fh999506597609B640F1D3672A0082Dc',
        },
        {
          label: 'Noun 11',
          address: '0x78Bddfs96cC5c0d6B506597609B64F1D999D82Dc',
        },
        {
          label: 'Noun 3',
          address: '0x625BBa96Cc5c0d6B506597609B64F1D3672D82Dc',
        },
      ]}
      tag="Custom Tag"
      tagTone="background"
    />
  </Box>
</Stack>

<Stack align="flex-start">
  <AvatarGroup
    limit={3}
    members={[
      {
        label: 'Noun 97',
        address: '0x62500C50fh999506597609B640F1D3672A0082Dc',
      },
      {
        label: 'Noun 11',
        address: '0x78Bddfs96cC5c0d6B506597609B64F1D999D82Dc',
      },
      {
        label: 'Noun 3',
        address: '0x625BBa96Cc5c0d6B506597609B64F1D3672D82Dc',
      },
    ]}
    tag="Custom Tag"
    tagTone="accent"
  />

  <AvatarGroup
    limit={3}
    members={[
      {
        label: 'Noun 97',
        address: '0x62500C50fh999506597609B640F1D3672A0082Dc',
      },
      {
        label: 'Noun 11',
        address: '0x78Bddfs96cC5c0d6B506597609B64F1D999D82Dc',
      },
      {
        label: 'Noun 3',
        address: '0x625BBa96Cc5c0d6B506597609B64F1D3672D82Dc',
      },
    ]}
    tag="Custom Tag"
    tagTone="red"
  />

  <Box
    backgroundColor="foregroundTertiary"
    borderRadius="extraLarge"
    padding="8px"
  >
    <AvatarGroup
      limit={3}
      members={[
        {
          label: 'Noun 97',
          address: '0x62500C50fh999506597609B640F1D3672A0082Dc',
        },
        {
          label: 'Noun 11',
          address: '0x78Bddfs96cC5c0d6B506597609B64F1D999D82Dc',
        },
        {
          label: 'Noun 3',
          address: '0x625BBa96Cc5c0d6B506597609B64F1D3672D82Dc',
        },
      ]}
      tag="Custom Tag"
      tagTone="background"
    />
  </Box>
</Stack>

Custom JSX Tag
#

<AvatarGroup
  limit={3}
  members={[
    { label: 'Noun 97', address: '0x62500C50fh999506597609B640F1D3672A0082Dc' },
    { label: 'Noun 11', address: '0x78Bddfs96cC5c0d6B506597609B64F1D999D82Dc' },
    { label: 'Noun 3', address: '0x625BBa96Cc5c0d6B506597609B64F1D3672D82Dc' },
  ]}
  size="20px"
  tag={
    <Box
      alignItems="center"
      aspectRatio="1/1"
      backgroundColor="foregroundSecondary"
      borderRadius="full"
      display="flex"
      height="20px"
      justifyContent="center"
    >
      <IconSparkles color="textSecondary" size="12px" />
    </Box>
  }
/>

<AvatarGroup
  limit={3}
  members={[
    { label: 'Noun 97', address: '0x62500C50fh999506597609B640F1D3672A0082Dc' },
    { label: 'Noun 11', address: '0x78Bddfs96cC5c0d6B506597609B64F1D999D82Dc' },
    { label: 'Noun 3', address: '0x625BBa96Cc5c0d6B506597609B64F1D3672D82Dc' },
  ]}
  size="20px"
  tag={
    <Box
      alignItems="center"
      aspectRatio="1/1"
      backgroundColor="foregroundSecondary"
      borderRadius="full"
      display="flex"
      height="20px"
      justifyContent="center"
    >
      <IconSparkles color="textSecondary" size="12px" />
    </Box>
  }
/>

Edit on GitHub

Props#

Sizes#

Limit#

Custom Tag#

Placeholder#

Tag tone#

Custom JSX Tag#

Props
#

Sizes
#

Limit
#

Custom Tag
#

Placeholder
#

Tag tone
#

Custom JSX Tag
#