# 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.

# API

# Props

# Size

The size prop allows you to define the height and width of v-avatar. This prop scales both evenly with an aspect ratio of 1. height and width props will override this prop.

# Tile

The tile prop removes the border radius from v-avatar leaving you with a simple square avatar.

# Slots

# Default

The v-avatar default slot will accept the v-icon component, an image, or text. Mix and match these with other props to create something unique.

# Misc

# Advanced usage

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

Another example combining avatar with menu.

# Profile Card

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

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.
Edit this page on GitHub
Last updated:11/12/2024, 6:59:50 AM