<template>
   <div>
        <u-space :gap="20" align="end">
          <u-badge value="3" dot color="skyblue">
               <u-avatar></u-avatar>
          </u-badge>
          <u-badge value="3" dot color="pink">
               <u-avatar></u-avatar>
          </u-badge>
          <u-badge value="3" dot color="#87d068">
               <u-avatar></u-avatar>
          </u-badge>
          <u-badge value="3" dot color="#f50">
               <u-avatar></u-avatar>
          </u-badge>
          <u-badge value="3" dot color="orange">
               <u-avatar></u-avatar>
          </u-badge>
          <u-badge value="3" dot color="purple">
               <u-avatar></u-avatar>
          </u-badge>
          <u-badge value="3" dot color="lime">
               <u-avatar></u-avatar>
          </u-badge>
        </u-space>
   </div>
               
</template>

<script setup>
import { UBadge, UAvatar, USpace } from 'ungeui'
</script>