directus/docs/reference/app/components/v-avatar.md

Avatar

The avatar component can be used to display a person or something similar. It will generate a grey box in which either a profile picture or an icon or text can be inserted.

<v-avatar>RVZ</v-avatar>

<v-avatar>
	<img src="..." />
</v-avatar>

<v-avatar>
	<v-icon name="person" />
</v-avatar>

Reference

Props

Prop	Description	Default	Type
size	Size in px	null	Number
tile	Render as a tile (square)	false	Boolean

Slots

Slot	Description	Data
default	Default slot to display your elements inside the avatar	--

Events

n/a

CSS Variables

Variable	Default
--v-avatar-color	var(--background-normal)
--v-avatar-size	48px