Avatars

The v-avatar component is typically used to display circular user profile pictures. This component will allow you to dynamically size and add a border radius of responsive images, icons, and text. A tile variation is available for displaying an avatar without border radius.

Usage

Avatars in their simplest form display content within a circular container.

Anatomy

The recommended placement of elements inside of v-avatar is:

  • Place a v-img or v-icon component within the default slot
  • Place textual content within the default slot

Element / AreaDescription
1. ContainerThe Avatar container that typically holds a v-icon or v-img component

API

ComponentDescription
v-avatarPrimary Component

Examples

Props

Size

The size prop allows you to change the height and width of the avatar.

v-avatar/prop-size.vue

Tile

The rounded prop can be used to remove the border radius from v-avatar leaving you with a simple square avatar.

v-avatar/prop-tile.vue

Slots

Default

The v-avatar default slot allows you to render content such as v-icon components, images, or text. Mix and match these with other props to create something unique.

v-avatar/slot-default.vue

Misc

Advanced usage

Combining an avatar with other components allows you to build beautiful user interfaces right out of the box.

v-avatar/misc-advanced.vue

Another example combining avatar with menu.

v-avatar/misc-avatar-menu.vue

Profile Card

Using the tile prop, we can create a sleek hard-lined profile card.

v-avatar/misc-profile-card.vue

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.