Avatar ​

A visual representation of a user, typically shown as an image, initials, or an icon.

Themes ​

E
E
vue
<script setup lang="ts">
import { Avatar } from 'frappe-ui'

const url = 'https://avatars.githubusercontent.com/u/499550?s=60&v=4'
</script>

<template>
  <Avatar :image="url" size="lg" />
  <Avatar :image="url" size="lg" shape="square" />
  <Avatar label="EY" size="lg" />
  <Avatar label="EY" size="lg" shape="square" />
</template>

Controlled state ​

vue
<script setup lang="ts">
import { Avatar } from 'frappe-ui'

const url = 'https://avatars.githubusercontent.com/u/499550?s=60&v=4'
const sizes = ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl']
</script>

<template>
  <Avatar :image="url" v-for="size in sizes" :key="size" :size="size" />
</template>

API Reference ​

Show types
typescript
export interface AvatarProps {
  /** Image URL used for the avatar */
  image?: string

  /** Fallback text shown when the image is missing */
  label?: string

  /** Controls the overall size of the avatar */
  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'

  /** Defines the avatar shape */
  shape?: 'circle' | 'square'
}
image
string

Image URL used for the avatar

label
string

Fallback text shown when the image is missing

size
= "md"
"md" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl"

Controls the overall size of the avatar

shape
= "circle"
"circle" | "square"

Defines the avatar shape

default
—

Custom content shown inside the avatar (icon / initials replacement)

indicator
—

Small indicator shown at the bottom-right of the avatar

AlertBadge