Avatar

Muestra imágenes de perfil de usuario, iniciales, iconos o gráficos de marcador de posición con indicadores de estado.

Importar

import { Avatar } from 'asterui'

Ejemplos

Avatar Básico

Avatar simple con imagen usando la prop src.

</>

import { Avatar } from 'asterui'

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

export default App

Tamaños

Controla el tamaño del avatar con la 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 o cuadrados.

</>

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 Estado

Muestra presencia en línea o fuera de línea.

</>

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

Muestra iniciales o contenido 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 Icono

Muestra iconos en lugar de imágenes.

</>

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 Avatares

Agrupa múltiples avatares con superposición.

</>

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 Avatares con Conteo Máximo

Muestra conteo de desbordamiento cuando se excede el 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

Propiedad	Descripción	Tipo	Predeterminado
src	URL de origen de la imagen	string	-
alt	Texto alternativo de la imagen	string	'avatar'
icon	Elemento de icono a mostrar	ReactNode	-
children	Contenido de texto (ej., iniciales) o contenido personalizado	ReactNode	-
size	Tamaño del avatar	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'
shape	Forma del avatar	'circle' | 'square'	'circle'
status	Indicador de estado de presencia	'online' | 'offline'	-
className	Clases CSS adicionales	string	-
style	Estilos en línea	CSSProperties	-

Avatar.Group

Propiedad	Descripción	Tipo	Predeterminado
children	Múltiples componentes Avatar	ReactNode	-
max	Máximo de avatares a mostrar antes del desbordamiento +N	number	-
size	Tamaño para todos los avatares en el grupo	'xs' | 'sm' | 'md' | 'lg' | 'xl'	-
className	Clases CSS adicionales	string	-
style	Estilos en línea	CSSProperties	-

Accesibilidad

• Las imágenes tienen texto alt para lectores de pantalla
• Los indicadores de estado usan color y posición para visibilidad
• Los avatares de texto son legibles por lectores de pantalla