Frappe UIFrappe UI

Avatar ​

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

Playground ​

Shapes ​

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>

Sizes ​

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>

Themes ​

g
b
g
a
r
v
vue
<script setup lang="ts">
import { Avatar } from 'frappe-ui'
import type { AvatarTheme } from 'frappe-ui'

const themes: AvatarTheme[] = [
  'gray',
  'blue',
  'green',
  'amber',
  'red',
  'violet',
]
</script>

<template>
  <Avatar
    v-for="theme in themes"
    :key="theme"
    :label="theme"
    :theme="theme"
    size="lg"
  />
</template>

API Reference ​

Show types
typescript
export type AvatarTheme =
  | 'gray'
  | 'blue'
  | 'green'
  | 'amber'
  | 'red'
  | 'violet'

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'

  /** Visual color theme used for the fallback avatar */
  theme?: AvatarTheme
}
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

theme
= "gray"
"gray" | "blue" | "green" | "amber" | "red" | "violet"

Visual color theme used for the fallback avatar

default
—

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

indicator
—

Small indicator shown at the bottom-right of the avatar

AlertBadge