render (h, { injections, props, data, ...rest }) {
    const { size, label, ...avatarProps } = props
    const colorMode = injections.$chakraColorMode()
    const theme = injections.$chakraTheme()
    const borderColor = { light: '#fff', dark: 'gray.800' }
    const bg = { light: 'gray.200', dark: 'whiteAlpha.400' }
    const sizeKey = avatarSizes[size]
    const _size = theme.sizes[sizeKey]
    const fontSize = `calc(${_size} / 2.75)`

    return h(CFlex, {
      ...rest,
      props: forwardProps(avatarProps),
      attrs: {
        align: 'center',
        justify: 'center',
        h: avatarSizes[size],
        w: avatarSizes[size],
        bg: bg[colorMode],
        color: 'inherit',
        rounded: 'full',
        border: '2px',
        borderColor: borderColor[colorMode],
        fontSize,
        ...data.attrs,
        'data-chakra-component': 'CMoreAvatarLabel'
      }
    }, label)
  }
CMoreAvatarLabel component

For excess avatars, the CMoreAvatarLabel displays an indicator of the surplus avatars

@extends CFlex
@see Docs https://vue.chakra-ui.com/avatar