Note

This documentation describes the Avatar Vue component for native UI views for Xml templates see avatar.

Avatar

Displays a user avatar with either initials text or an icon image.

Import

import { Avatar } from '@neos/design-system'

Props

Prop	Type	Default	Description
label	string	undefined	Text to display (typically 1–2 initials)
icon	string	undefined	Icon name to display when no label is provided
size	'extrasmall' \| 'small' \| 'medium' \| 'large' \| 'extralarge'	'medium'	Avatar size
shape	'circle' \| 'square'	'circle'	Avatar shape

Usage Examples

User initials avatar

<Avatar label="JD" />

Large square avatar with an icon

<Avatar icon="user" size="large" shape="square" />

In a user profile header

<HorizontalLayout space="small" vertical-align="center">
  <Avatar :label="userInitials" size="medium" />
  <VerticalLayout space="none">
    <Text weight="strong">{{ fullName }}</Text>
    <Text size="small">{{ email }}</Text>
  </VerticalLayout>
</HorizontalLayout>

Small avatar in a data list

<HorizontalLayout v-for="user in users" :key="user.id" space="small">
  <Avatar :label="user.initials" size="small" />
  <Text>{{ user.name }}</Text>
</HorizontalLayout>