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.
Avatars in their simplest form display content within a circular container.
Select your desired component from below and see the available props, slots, events and functions.
Below is a collection of simple to complex examples.
size prop allows you to define the height and width of
v-avatar. This prop scales both evenly with an aspect ratio of 1.
width props will override this prop.
tile prop removes the border radius from v-avatar leaving you with a simple square avatar.
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.
Using the tile prop, we can create a sleek hard-lined profile card.
Combining an avatar with other components allows you to build beautiful user interfaces right out of the box.
Ready for more? Continue reading with: