Avatar

Avatars can be used to represent people or objects. It supports images, icons, or letters.

When To Use

• Display user profile pictures or initials
• Show user presence or status with badges
• Create user lists or team member displays
• Represent objects or entities with visual identifiers

Import

import { TxAvatar } from "tx-design-ui";

Examples

Basic

The simplest usage.

import { TxAvatar } from "tx-design-ui";

<TxAvatar />
<TxAvatar url="https://example.com/avatar.jpg" />

Type

Image, Icon, and letter are supported.

import { SvgIcon } from "tx-design-ui";

// Image avatar
<TxAvatar url="https://example.com/avatar.jpg" alt="User" />

// Icon avatar
<TxAvatar icon={<SvgIcon.IconUserSquare01 />} />

// Letter avatar
<TxAvatar>U</TxAvatar>
<TxAvatar>TX</TxAvatar>

Size

Avatar has 3 predefined sizes: small, medium, large, or you can set a custom size using a number.

<TxAvatar size="small" />
<TxAvatar size="medium" />
<TxAvatar size="large" />
<TxAvatar size={64} />
<TxAvatar size={80} />

Shape

Avatar can have circle or square shape.

<TxAvatar shape="circle" />
<TxAvatar shape="square" />

With Badge

Avatar with badge to show user status or notification count.

// Badge with number
<TxAvatar badge={5} />
<TxAvatar badge={99} />

// Badge with dot
<TxAvatar badge="dot" />

Custom Color

Set custom background color for avatar.

<TxAvatar color="#f56a00">A</TxAvatar>
<TxAvatar color="#7265e6">B</TxAvatar>
<TxAvatar color="#ffbf00">C</TxAvatar>
<TxAvatar color="#00a2ae">D</TxAvatar>

Avatar Group

Avatar group can display multiple avatars together.

<TxAvatar.Group max={3}>
  <TxAvatar url="https://example.com/user1.jpg" />
  <TxAvatar url="https://example.com/user2.jpg" />
  <TxAvatar url="https://example.com/user3.jpg" />
  <TxAvatar url="https://example.com/user4.jpg" />
  <TxAvatar url="https://example.com/user5.jpg" />
</TxAvatar.Group>

The max prop limits the number of avatars to show. Additional avatars will be shown in a popover on hover.

Combined Usage

Combine different props for advanced usage.

import { SvgIcon } from "tx-design-ui";

<TxAvatar
  size={64}
  shape="square"
  color="#87d068"
  icon={<SvgIcon.IconUserSquare01 />}
  badge={5}
/>

<TxAvatar
  size="large"
  url="https://example.com/avatar.jpg"
  badge="dot"
/>

API

TxAvatar

Property	Type	Default	Description
url	string	-	The image URL of the avatar
alt	string	"avatar"	The alt text for the image
icon	ReactNode	-	Custom icon to be used in the avatar
size	'small' | 'medium' | 'large' | number	36	The size of the avatar
shape	'circle' | 'square'	'circle'	The shape of the avatar
color	string	'#0e0e13'	The background color of the avatar
badge	number | 'dot'	-	Badge to show on avatar
children	ReactNode	-	Letter or custom content for avatar

TxAvatar.Group

Property	Type	Default	Description
max	number	-	Max avatars to show, rest shown in popover
size	'small' | 'medium' | 'large' | number	36	The size of avatars in the group
shape	'circle' | 'square'	-	The shape of avatars in the group
children	ReactNode[]	-	Array of TxAvatar components

Notes

• Avatar uses Ant Design's Avatar component internally
• When using badge with a number, large numbers (>99) will be displayed as "99+"
• Avatar.Group automatically handles overflow avatars with a popover
• Custom size accepts any positive number in pixels
• The color prop only applies when no image URL is provided
• Badge indicator can be a number (for counts) or "dot" (for status)