avatar

name	avatar
description	Avatar system with four components: UIAvatar (image or initials), UIAvatarGroup (stacked row with overflow), UIAvatarGroupAddButton (dashed add action), and UIAvatarLabel (avatar with name and supporting text).
type	component
library	vue-core-design-system
category	display
exports	["UIAvatar","UIAvatarGroup","UIAvatarGroupAddButton","UIAvatarLabel"]

UIAvatar

An avatar system for displaying user profile pictures with initials fallback, status indicators, and logo overlays. Includes group and labeled variants.

When to Use

• Displaying user profile pictures or identity indicators
• Showing a group of users with an overflow count
• Presenting user information with name and supporting text alongside an avatar

Use instead: UIBadge with the avatar prop for inline avatar-with-text badges. UILogo for brand/company logos.

Import

import { UIAvatar, UIAvatarGroup, UIAvatarGroupAddButton, UIAvatarLabel } from '@wisemen/vue-core-design-system'

Quick Start

<script setup lang="ts">
import { UIAvatar } from '@wisemen/vue-core-design-system'
</script>

<template>
  <UIAvatar name="Olivia Rhye" src="https://example.com/photo.jpg" />
</template>

Source Files

For full API details, read the props files. For usage examples, read the playground files.

• Props: src/ui/avatar/avatar/avatar.props.ts, src/ui/avatar/avatar-group/avatarGroup.props.ts, src/ui/avatar/avatar-label/avatarLabel.props.ts
• Components: src/ui/avatar/avatar/Avatar.vue, src/ui/avatar/avatar-group/AvatarGroup.vue, src/ui/avatar/avatar-label/AvatarLabel.vue
• Playground: src/ui/avatar/avatar/stories/, src/ui/avatar/avatar-group/stories/, src/ui/avatar/avatar-label/stories/

See Also

• badge -- For labeled status tags with optional avatar
• logo -- For brand/company logos
• storybook -- For story and playground conventions when editing stories/