Avatar

Matches Arco Avatar with text, icons, sizes and grouped avatars. See the Element Plus docs for props.

Sizes & Shapes

Size and shape map to Arco's corresponding options.

AABCD

<script setup lang="ts">
import { UserFilled } from '@element-plus/icons-vue'
</script>

<template>
  <el-avatar size="small">A</el-avatar>
  <el-avatar>AB</el-avatar>
  <el-avatar size="large">C</el-avatar>
  <el-avatar shape="square">D</el-avatar>
  <el-avatar :icon="UserFilled" />
</template>

Avatar Group

ElAvatarGroup overlaps avatars with separating borders.

ABC

<template>
  <el-avatar-group>
    <el-avatar>A</el-avatar><el-avatar>B</el-avatar><el-avatar>C</el-avatar>
  </el-avatar-group>
</template>

Differences from Arco

• Long text does not automatically shrink as in Arco; use short initials.