Avatar
User avatars and identity marks
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 loads on client.
Sizes
Preset sizes: small/medium/large/xlarge.
Demo loads on client.
Text Avatars
Use text as avatar content.
Demo loads on client.
Icon Avatars
Use icons as avatar content.
Demo loads on client.
Avatar Group
Stacked avatars with a max limit.
Demo loads on client.
Status
Status badge overlay.
Demo loads on client.
Clickable Avatar
<template>
<TxAvatar
name="Click"
clickable
@click="handleAvatarClick"
/>
</template>
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) |
Was this helpful?