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.

Playground

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

MS
Options

API

Examples

Below is a collection of simple to complex examples.

Size

The size prop allows you to define the height and width of 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.

Types

You can add text, images and icons to the avatar.

Ready For More?

Continue to learn more about svelte materialify with content selected by the creator.



Last Updated: 2022-10-03