componente · @solu30/ui-kit/display

Avatar

Foto de perfil que cae a iniciales si no carga, y a un ícono de persona o empresa si tampoco hay nombre.

Seguir leyendo — 2 párrafos más

Avatar component with image display and initials fallback.

Uses CSS variables for theming:

--ui-accent for fallback background
--ui-content-inverse for fallback text

53 sitios de import en 7 de 15 verticales — un archivo que la importa cuenta una vez, monte una instancia o veinte.

TheCharterPanel
carlosmartinpavon
cmp-packages
gestorsalon
luigi
raquetea
zentrya

El componente, montado

Cargando el espécimen…

export function AvatarMatrix() {
  return (
    <Stage label="Avatar · 5 tamaños × persona/empresa, con y sin iniciales" tall wide>
      <div className="flex w-full flex-col gap-4">
        <Row>
          {AVATAR_SIZES.map((s) => (
            <Avatar key={s} alt="Martina Suárez" size={s} type="user" />
          ))}
        </Row>
        <Row>
          {AVATAR_SIZES.map((s) => (
            <Avatar key={s} alt="Heladería Luigi" size={s} type="company" />
          ))}
        </Row>
        <Row>
          <Avatar size="lg" type="user" />
          <span className="text-xs text-content/50">sin alt → ícono genérico</span>
        </Row>
        <Row>
          <AvatarInitials name="Martina Suárez" size="sm" />
          <AvatarInitials name="Diego Reynoso" size="md" />
          <AvatarInitials name="Cocina Luigi" size="lg" />
        </Row>
      </div>
    </Stage>
  )
}

De specimens/display.tsx · AvatarMatrix: el espécimen del Muestrario, no un ejemplo oficial del paquete. Muestra cómo se usa la pieza de verdad, montada contra los tipos instalados —eso es lo que vale— pero no es documentación del kit.

Cómo se usa

import { Avatar } from '@solu30/ui-kit/display'

Props

7 props declaradas en los tipos de la versión instalada.
Prop	Requerida	Tipo	Qué hace
src	opcional	`string \| null`	Image source URL
alt	opcional	`string`	Alt text for the image (also used to derive initials)
size	opcional	`AvatarSize`	Avatar size
type	opcional	`AvatarType`	Entity type — 'company' renders Building2 icon as fallback instead of user icon
className	opcional	`string`	Additional CSS class
fallbackClassName	opcional	`string`	Additional CSS class for the fallback state
onError	opcional	`() => void`	Callback when image fails to load

Ejemplo del paquete

<Avatar src="/photo.jpg" alt="John Doe" size="lg" />
<Avatar alt="John Doe" /> // Shows "JD" initials
<Avatar /> // Shows generic user icon

Del @example del JSDoc de @solu30/ui-kit, sin editar: son 65 de los 541 símbolos. La sangría y los renglones en blanco son los del paquete.