Avatar

Display user profile images, initials, icons, or placeholder graphics with status indicators.

Import

import { Avatar } from 'asterui'

Examples

Basic Avatar

Simple avatar with image using the src prop.

</>

import { Avatar } from 'asterui'

function App() {
  return (
      <Avatar
        src="/avatar-1.webp"
        alt="User avatar"
      />
    )
}

export default App

Sizes

Control avatar size with the size prop.

</>

import { Avatar, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" size="sm" align="center">
        <Avatar size="xs" src="/avatar-1.webp" />
        <Avatar size="sm" src="/avatar-1.webp" />
        <Avatar size="md" src="/avatar-1.webp" />
        <Avatar size="lg" src="/avatar-1.webp" />
        <Avatar size="xl" src="/avatar-1.webp" />
      </Space>
    )
}

export default App

Shapes

Circle or square avatars.

</>

import { Avatar, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" size="sm">
        <Avatar shape="circle" src="/avatar-1.webp" />
        <Avatar shape="square" src="/avatar-1.webp" />
      </Space>
    )
}

export default App

Status Indicators

Show online or offline presence.

</>

import { Avatar, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" size="sm">
        <Avatar status="online" src="/avatar-1.webp" />
        <Avatar status="offline" src="/avatar-1.webp" />
      </Space>
    )
}

export default App

Text Avatars

Display initials or text content.

</>

AI

JD

MX

import { Avatar, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" size="sm" align="center">
        <Avatar size="xl">
          <span className="text-3xl">AI</span>
        </Avatar>
        <Avatar size="lg">
          <span className="text-xl">JD</span>
        </Avatar>
        <Avatar size="md">
          <span>MX</span>
        </Avatar>
      </Space>
    )
}

export default App

Icon Avatars

Display icons instead of images.

</>

import { Avatar, Space } from 'asterui'
import { UserIcon, UserCircleIcon } from '@aster-ui/icons'

function App() {
  return (
      <Space direction="horizontal" size="sm">
        <Avatar icon={<UserIcon size={32} />} />
        <Avatar size="lg" icon={<UserCircleIcon size={40} />} />
      </Space>
    )
}

export default App

Avatar Group

Group multiple avatars with overlap.

</>

import { Avatar } from 'asterui'

function App() {
  return (
      <Avatar.Group>
        <Avatar src="/avatar-1.webp" />
        <Avatar src="/avatar-1.webp" />
        <Avatar src="/avatar-1.webp" />
        <Avatar src="/avatar-1.webp" />
      </Avatar.Group>
    )
}

export default App

Avatar Group with Max Count

Show overflow count when exceeding max.

</>

+3

import { Avatar } from 'asterui'

function App() {
  return (
      <Avatar.Group max={3}>
        <Avatar src="/avatar-1.webp" />
        <Avatar src="/avatar-1.webp" />
        <Avatar src="/avatar-1.webp" />
        <Avatar src="/avatar-1.webp" />
        <Avatar src="/avatar-1.webp" />
        <Avatar src="/avatar-1.webp" />
      </Avatar.Group>
    )
}

export default App

API

Avatar

Property	Description	Type	Default
src	Image source URL	string	-
alt	Image alt text	string	'avatar'
icon	Icon element to display	ReactNode	-
children	Text content (e.g., initials) or custom content	ReactNode	-
size	Avatar size	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'
shape	Avatar shape	'circle' | 'square'	'circle'
status	Presence status indicator	'online' | 'offline'	-
className	Additional CSS classes	string	-
style	Inline styles	CSSProperties	-

Avatar.Group

Property	Description	Type	Default
children	Multiple Avatar components	ReactNode	-
max	Maximum avatars to show before +N overflow	number	-
size	Size for all avatars in the group	'xs' | 'sm' | 'md' | 'lg' | 'xl'	-
className	Additional CSS classes	string	-
style	Inline styles	CSSProperties	-

Accessibility

• Images have alt text for screen readers
• Status indicators use color and position for visibility
• Text avatars are readable by screen readers