BreezeUI
  • English

    • Avatar

    An image element with a fallback for representing the user.

    Component Features

    • 📏 Multiple Sizes: Supports xs, sm, md, lg, xl, 2xl size specs.
    • 🔲 Multiple Shapes: Supports circle, square, and rounded rectangle shapes.
    • 👥 Avatar Group: Use BrAvatarGroup to stack multiple avatars.
    • 🏷️ Avatar Badge: Supports status badges (online/offline/busy/away) on avatars.
    • 🖼️ Fallback: Displays fallback content when image fails to load.
    • 🎨 Theme Customization: Supports custom border styles.

    Basic Usage

    <script setup lang="ts">
import { BrAvatar, BrAvatarImage, BrAvatarFallback } from '@breeze-ui/vue';
</script>

<template>
  <div class="flex items-center gap-4">
    <BrAvatar>
      <BrAvatarImage src="https://api.dicebear.com/9.x/avataaars/svg?seed=Radix" alt="@radix-vue" />
      <BrAvatarFallback>RV</BrAvatarFallback>
    </BrAvatar>
    <BrAvatar>
      <BrAvatarFallback>CN</BrAvatarFallback>
    </BrAvatar>
  </div>
</template>

    Sizes

    Use the size prop to control the size of the avatar.

    <script setup lang="ts">
import { BrAvatar, BrAvatarImage, BrAvatarFallback } from '@breeze-ui/vue';
</script>

<template>
  <div class="flex items-center gap-4 flex-wrap">
    <BrAvatar size="xs">
      <BrAvatarFallback>XS</BrAvatarFallback>
    </BrAvatar>
    <BrAvatar size="sm">
      <BrAvatarFallback>SM</BrAvatarFallback>
    </BrAvatar>
    <BrAvatar size="md">
      <BrAvatarFallback>MD</BrAvatarFallback>
    </BrAvatar>
    <BrAvatar size="lg">
      <BrAvatarFallback>LG</BrAvatarFallback>
    </BrAvatar>
    <BrAvatar size="xl">
      <BrAvatarFallback>XL</BrAvatarFallback>
    </BrAvatar>
    <BrAvatar size="2xl">
      <BrAvatarFallback>2XL</BrAvatarFallback>
    </BrAvatar>
  </div>
</template>

    Shapes

    Use the shape prop to control the shape of the avatar.

    <script setup lang="ts">
import { BrAvatar, BrAvatarImage, BrAvatarFallback } from '@breeze-ui/vue';
</script>

<template>
  <div class="flex items-center gap-4">
    <BrAvatar shape="circle">
      <BrAvatarImage src="https://api.dicebear.com/9.x/avataaars/svg?seed=Radix" alt="@radix-vue" />
      <BrAvatarFallback>CI</BrAvatarFallback>
    </BrAvatar>
    <BrAvatar shape="rounded">
      <BrAvatarImage src="https://api.dicebear.com/9.x/avataaars/svg?seed=Vue" alt="@vue" />
      <BrAvatarFallback>RO</BrAvatarFallback>
    </BrAvatar>
    <BrAvatar shape="square">
      <BrAvatarImage src="https://api.dicebear.com/9.x/avataaars/svg?seed=Vite" alt="@vite" />
      <BrAvatarFallback>SQ</BrAvatarFallback>
    </BrAvatar>
  </div>
</template>

    Avatar Group

    Use the BrAvatarGroup component to stack avatars together.

    <script setup lang="ts">
import { BrAvatar, BrAvatarImage, BrAvatarFallback, BrAvatarGroup } from '@breeze-ui/vue';
</script>

<template>
  <div class="flex flex-col gap-4">
    <BrAvatarGroup :max="3">
      <BrAvatar v-for="i in 5" :key="i">
        <BrAvatarImage :src="`https://api.dicebear.com/7.x/avataaars/svg?seed=${i}`" />
        <BrAvatarFallback>U{{ i }}</BrAvatarFallback>
      </BrAvatar>
    </BrAvatarGroup>
    
    <BrAvatarGroup size="sm" :max="4">
      <BrAvatar v-for="i in 10" :key="i">
        <BrAvatarFallback>U{{ i }}</BrAvatarFallback>
      </BrAvatar>
    </BrAvatarGroup>
  </div>
</template>

    Avatar Badge

    Use the BrAvatarBadge component to display a status badge.

    <script setup lang="ts">
import { BrAvatar, BrAvatarImage, BrAvatarFallback, BrAvatarBadge } from '@breeze-ui/vue';
</script>

<template>
  <div class="flex items-center gap-4">
    <BrAvatar>
      <BrAvatarImage src="https://api.dicebear.com/9.x/avataaars/svg?seed=Radix" alt="@radix-vue" />
      <BrAvatarFallback>RV</BrAvatarFallback>
      <BrAvatarBadge status="online" />
    </BrAvatar>
    <BrAvatar>
      <BrAvatarFallback>CN</BrAvatarFallback>
      <BrAvatarBadge status="busy" position="top-right" />
    </BrAvatar>
    <BrAvatar>
      <BrAvatarFallback>AB</BrAvatarFallback>
      <BrAvatarBadge status="offline" position="bottom-left" />
    </BrAvatar>
    <BrAvatar>
      <BrAvatarFallback>XY</BrAvatarFallback>
      <BrAvatarBadge status="away" position="top-left" />
    </BrAvatar>
  </div>
</template>

    API

    BrAvatar

    Props

    NameTypeDefaultDescription
    sizestring'md'Size variants: xs, sm, md, lg, xl, 2xl
    shapestring'circle'Shape variants: circle, square, rounded
    borderedbooleanfalseWhether to show a border around the avatar

    BrAvatarImage

    Props

    NameTypeDescription
    srcstringThe source of the image
    altstringThe alt text of the image

    BrAvatarFallback

    Props

    NameTypeDescription
    delayMsnumberThe delay in milliseconds before the fallback is shown

    BrAvatarGroup

    Props

    NameTypeDefaultDescription
    maxnumber-The maximum number of avatars to show
    sizestring'md'Size of the avatars in the group
    shapestring'circle'Shape of the avatars in the group
    borderedbooleantrueWhether to show a border around the avatars

    BrAvatarBadge

    Props

    NameTypeDefaultDescription
    statusstring'online'Status of the avatar: online, offline, busy, away
    positionstring'bottom-right'Position of the badge: top-right, bottom-right, top-left, bottom-left