Avatar

Exibir imagens de perfil de usuário, iniciais, ícones ou gráficos placeholder com indicadores de status.

Importação

import { Avatar } from 'asterui'

Exemplos

Avatar Básico

Avatar simples com imagem usando a prop src.

</>

import { Avatar } from 'asterui'

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

export default App

Tamanhos

Controlar o tamanho do avatar com a prop size.

</>

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

Formas

Avatares circulares ou quadrados.

</>

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

Indicadores de Status

Mostrar presença online ou offline.

</>

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

Avatares de Texto

Exibir iniciais ou conteúdo de texto.

</>

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

Avatares de Ícone

Exibir ícones em vez de imagens.

</>

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

Grupo de Avatar

Agrupar vários avatares com sobreposição.

</>

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

Grupo de Avatar com Contagem Máxima

Mostrar contagem de overflow ao exceder o máximo.

</>

+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

Propriedade	Descrição	Tipo	Padrão
src	URL da fonte da imagem	string	-
alt	Texto alternativo da imagem	string	'avatar'
icon	Elemento de ícone para exibir	ReactNode	-
children	Conteúdo de texto (ex: iniciais) ou conteúdo personalizado	ReactNode	-
size	Tamanho do avatar	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'
shape	Forma do avatar	'circle' | 'square'	'circle'
status	Indicador de status de presença	'online' | 'offline'	-
className	Classes CSS adicionais	string	-
style	Estilos inline	CSSProperties	-

Avatar.Group

Propriedade	Descrição	Tipo	Padrão
children	Múltiplos componentes Avatar	ReactNode	-
max	Máximo de avatares para mostrar antes do overflow +N	number	-
size	Tamanho para todos os avatares no grupo	'xs' | 'sm' | 'md' | 'lg' | 'xl'	-
className	Classes CSS adicionais	string	-
style	Estilos inline	CSSProperties	-

Acessibilidade

• Imagens têm texto alt para leitores de tela
• Indicadores de status usam cor e posição para visibilidade
• Avatares de texto são legíveis por leitores de tela