Skip to main content

​
Avatar

The VAvatar component is used to display circular user profile images, icons, or text. It supports various sizes, colors, and can include badges for status indicators.

​
Usage

<template>
  <v-avatar>
    <v-img src="/avatar.jpg" alt="User" />
  </v-avatar>
</template>

​
Props

​
image
string
Image source URL for the avatar
​
icon
IconValue
Icon to display in the avatar
​
text
string
Text content to display (typically initials)
​
badge
boolean | object
default:"false"
Show a badge on the avatar. Can be a boolean or an object with VBadge props
​
start
boolean
default:"false"
Aligns the avatar to the start of its container
​
end
boolean
default:"false"
Aligns the avatar to the end of its container
​
size
string | number
Sets the height and width of the component. Supports predefined sizes: x-small, small, default, large, x-large
​
density
string
Adjusts the vertical height. Options: default, comfortable, compact
​
rounded
string | number | boolean
Border radius of the avatar. Options: 0, xs, sm, md, lg, xl, pill, circle
​
color
string
Applies a specified color to the control
​
variant
string
default:"flat"
Applies a distinct style to the component. Options: flat, text, elevated, tonal, outlined, plain
​
border
string | number | boolean
Applies border styles to the component
​
tag
string
default:"div"
Specify a custom HTML tag to use on the root element

​
Slots

​
default
The default slot for custom avatar content
​
badge
Slot for custom badge content when badge prop is enabled

​
Examples

​
Image Avatar

<template>
  <v-avatar size="48">
    <v-img src="/user-avatar.jpg" alt="John Doe" />
  </v-avatar>
</template>

​
Icon Avatar

<template>
  <v-avatar color="primary" size="56">
    <v-icon icon="mdi-account" />
  </v-avatar>
</template>

​
Text Avatar

<template>
  <v-avatar color="info" text="JD" />
</template>

​
Avatar with Badge

<template>
  <v-avatar
    image="/user-avatar.jpg"
    :badge="{ color: 'success', content: '3', location: 'bottom end' }"
  />
</template>

​
Different Sizes

<template>
  <div class="d-flex align-center gap-4">
    <v-avatar size="x-small" color="primary" />
    <v-avatar size="small" color="secondary" />
    <v-avatar color="success" />
    <v-avatar size="large" color="warning" />
    <v-avatar size="x-large" color="error" />
  </div>
</template>

​
Variants

<template>
  <div class="d-flex gap-4">
    <v-avatar variant="flat" color="primary" icon="mdi-account" />
    <v-avatar variant="tonal" color="secondary" icon="mdi-account" />
    <v-avatar variant="outlined" color="success" icon="mdi-account" />
  </div>
</template>

Build docs developers (and LLMs) love

Get started for freeTalk to us