Avatar

Avatars can be used to represent people or objects. It supports images, Icons, or characters.

Basic usage

---

<template>
  <b-space>
    <b-avatar
      src="https://www.wallpaperflare.com/static/910/755/612/captain-america-civil-war-black-panther-low-poly-digital-art-wallpaper-preview.jpg"
    />
    <b-avatar
      circle
      src="https://www.wallpaperflare.com/static/910/755/612/captain-america-civil-war-black-panther-low-poly-digital-art-wallpaper-preview.jpg"
    />
    <b-avatar
      src="https://www.wallpaperflare.com/static/910/755/612/captain-america-civil-war-black-panther-low-poly-digital-art-wallpaper-preview.jpg"
      :size="64"
    />
  </b-space>
</template>

Types

It supports images, Icons, or characters.

BP

BP

---

<template>
  <b-space>
    <b-avatar
      src="https://www.wallpaperflare.com/static/910/755/612/captain-america-civil-war-black-panther-low-poly-digital-art-wallpaper-preview.jpg"
    />
    <b-avatar :icon="Boat" />
    <b-avatar name="Black Panther" />
    <b-avatar
      name="Black Panther"
      circle
      gradient
      color-id="V1StGXR8_Z5jdHi6B-myT"
    />
  </b-space>
</template>

<script setup lang="ts">
import { Boat } from '@bigin/icons-vue'
</script>

Fallback

fallback when image load error.

---

<template>
  <b-avatar src="https://non-existed" @error="() => true" />
</template>

Avatar Attributes

Name	Description	Type	Default
icon	representation type to icon, more info on icon component	string / Component	—
size	avatar size	number / large / default / small	default
circle	avatar circle shape	boolean	false
gradient	avatar fill with gradient	boolean	false
name	avatar text	string	—
color-id	avatar color identifier	string	—
src	the source of the image for an image avatar	string	—
src-set	native attribute srcset of image avatar	string	—
alt	native attribute alt of image avatar	string	—

Avatar Events

Name	Description	Type
error	trigger when image load error.	(e: Event) => void

Avatar Slots

Name	Description
default	customize avatar content.