componentStyles () {
      const borderColorStyle = { light: 'white', dark: 'gray.800' }
      return {
        w: this.size,
        h: this.size,
        position: 'absolute',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        transform: 'translate(25%, 25%)',
        bottom: '0',
        right: '0',
        border: '0.2em solid',
        borderColor: borderColorStyle[this.colorMode],
        rounded: 'full'
      }
    }
CAvatarBadge component

Avatar badge used to indicate the avatar status

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