Avatar

The Avatar component displays user avatars, brand marks, or other circular content, supporting images, text (slot / name), and icons.

Basic Usage

Avatar

Image, name, icon, and fallback content.

Demo will load when visible.

<template>
  <div style="display: flex; gap: 12px; align-items: center;">
    <TxAvatar src="https://avatars.githubusercontent.com/u/1?v=4" />
    <TxAvatar name="Talex DreamSoul" />
    <TxAvatar icon="user" />
    <TxAvatar>U</TxAvatar>
  </div>
</template>

Sizes

Preset sizes: small/medium/large/xlarge.

Demo will load when visible.

<template>
  <div style="display: flex; gap: 12px; align-items: center;">
    <TxAvatar size="small" src="https://avatars.githubusercontent.com/u/1?v=4" />
    <TxAvatar size="medium" src="https://avatars.githubusercontent.com/u/1?v=4" />
    <TxAvatar size="large" src="https://avatars.githubusercontent.com/u/1?v=4" />
    <TxAvatar size="xlarge" src="https://avatars.githubusercontent.com/u/1?v=4" />
  </div>
</template>

Text Avatars

Use text as avatar content.

Demo will load when visible.

<template>
  <div style="display: flex; gap: 12px; align-items: center;">
    <TxAvatar>U</TxAvatar>
    <TxAvatar>AB</TxAvatar>
    <TxAvatar>User</TxAvatar>
  </div>
</template>

Icon Avatars

Use icons as avatar content.

Demo will load when visible.

<template>
  <div style="display: flex; gap: 12px; align-items: center;">
    <TxAvatar icon="user" />
    <TxAvatar icon="team" />
  </div>
</template>

Avatar Group

Stacked avatars with a max limit.

Demo will load when visible.

<template>
  <TxAvatarGroup :max="3" size="small" :overlap="10">
    <TxAvatar src="https://avatars.githubusercontent.com/u/1?v=4" />
    <TxAvatar src="https://avatars.githubusercontent.com/u/2?v=4" />
    <TxAvatar src="https://avatars.githubusercontent.com/u/3?v=4" />
    <TxAvatar src="https://avatars.githubusercontent.com/u/4?v=4" />
    <TxAvatar src="https://avatars.githubusercontent.com/u/5?v=4" />
  </TxAvatarGroup>
</template>

Status

Status badge overlay.

Demo will load when visible.

<template>
  <div style="display: flex; gap: 12px; align-items: center;">
    <TxAvatar status="online" name="Online" />
    <TxAvatar status="offline" name="Offline" />
    <TxAvatar status="busy" name="Busy" />
    <TxAvatar status="away" name="Away" />
  </div>
</template>

Clickable Avatar

<template>
  <TxAvatar
    name="Click"
    clickable
    @click="handleAvatarClick"
  />
</template>

Avatar fallback priority is image, default slot, icon, name initials, then the default user icon. Image load errors fall back to the same non-image chain. size accepts presets, numbers, numeric strings, and px strings. TxAvatarGroup injects size only into child avatars that do not already set one, and renders +N when max hides extra avatars.

API Reference

Avatar Props

Property	Type	Default	Description
src		-	Avatar image URL
alt		-	Alt text
name		-	Name (used for initials fallback)
icon		-	Icon name (via TxIcon)
size	smallmediumlargexlarge		Avatar size
status	onlineofflinebusyaway	-	Status
clickable			Clickable state
backgroundColor		-	Custom background color
textColor		-	Custom text color

Avatar Events

Property	Type	Default	Description
click		-	Triggered on click (clickable=true only)

Avatar Slots

Property	Type	Default	Description
default	-	-	Custom content (higher priority than icon/name)