Avatar

Display a user portrait, initials, or icon.

Basic Usage

<template>
  <bp-space>
    <bp-avatar v-for="size in sizeList" :size>
      <IconUser3Line />
    </bp-avatar>
  </bp-space>
</template>

<script setup lang="ts">
import { IconUser3Line } from "birdpaper-icon";

const sizeList = ["mini", "small", "default", "large"];
</script>

Text Avatar

Show initials or short text when no image is available.

A

B

C

D

<template>
  <bp-space>
    <bp-avatar size="mini" shape="circle">A</bp-avatar>
    <bp-avatar size="small" shape="circle">B</bp-avatar>
    <bp-avatar shape="circle">C</bp-avatar>
    <bp-avatar size="large" shape="circle">D</bp-avatar>
  </bp-space>
</template>

Shape

shape supports circle and square.

Circle

Square

<template>
  <bp-space>
    <bp-avatar shape="circle">Circle</bp-avatar>
    <bp-avatar shape="square">Square</bp-avatar>
  </bp-space>
</template>

Image Avatar

Load an image with image-url and optional object-fit.

<template>
  <bp-space>
    <bp-avatar image-url="https://picsum.photos/200" size="mini" />
    <bp-avatar image-url="https://picsum.photos/200" size="small" />
    <bp-avatar image-url="https://picsum.photos/200" />
    <bp-avatar image-url="https://picsum.photos/200" size="large" />
  </bp-space>
</template>

Custom Size

Set a custom size value.

40

60

80

<template>
  <bp-space>
    <bp-avatar :size="40">40</bp-avatar>
    <bp-avatar :size="60">60</bp-avatar>
    <bp-avatar :size="80">80</bp-avatar>
  </bp-space>
</template>

Avatar Props

shape	Avatar shape	String	circle	-
image-url	Image URL	String	-	-
object-fit	Image fit mode	String	cover	-
size	Avatar size	StringNumber	default	-

Avatar Slots

default	Text or icon content	-	-
loading	Content while image is loading	-	-
error	Content when image fails to load	-	-