Avatar

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.

Colors

Use color prop to change the background color of avatar.

PI
SE
SU
IN
WA
ER

Tonal

Use variant="tonal" to create light background avatars.

PI
SE
SU
IN
WA
ER

Size

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

PI
SE
SU
IN
WA

Icon

You can use icon prop of v-avatar component for rendering icons.

Rounded

The rounded prop can be used to change the border radius of v-avatar.

Images

You can use image prop of v-avatar component for rendering image.

Group

Use v-avatar-group class as a wrapper of avatars.

CONTENTS

  • Introduction

  • Colors

  • Tonal

  • Size

  • Icon

  • Rounded

  • Images

  • Group