packages/docs/src/pages/en/components/avatars.md
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. When rounded prop set to 0 will display an avatar without border radius.
Avatars in their simplest form display content within a circular container.
<ExamplesUsage name="v-avatar" /> <PromotedEntry />| Component | Description |
|---|---|
| v-avatar | Primary Component |
The recommended placement of elements inside of v-avatar is:
| Element / Area | Description |
|---|---|
| 1. Container | The Avatar container that typically holds a v-icon or v-img component |
The size prop allows you to change the height and width of the avatar.
The badge prop wraps the avatar in a v-badge to display a status indicator. Set it to true for a default dot badge, a color string, or an object of VBadge props for full customization. Use the badge slot to render custom content inside the badge.
The rounded prop can be used to remove the border radius from v-avatar leaving you with a simple square avatar.
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.
Combining an avatar with other components allows you to build beautiful user interfaces right out of the box.
<ExamplesExample file="v-avatar/misc-advanced" />Another example combining avatar with menu.
<ExamplesExample file="v-avatar/misc-avatar-menu" />Using the rounded prop value 0, we can create a sleek hard-lined profile card.