Avatar representa visualmente a una persona, empresa o marca mediante imagen o fallback textual. Soporta tamaños definidos por diseño (32, 36 y 44 px) y fallback automático por inicial cuando no hay imagen.
Image · Fallback text · Sizes 32/36/44
Importá Avatar junto a sus subcomponentes para casos compuestos.
1import 'nave-ui-library/styles.css'2import { Avatar, AvatarImage, AvatarFallback } from 'nave-ui-library/react'Uso simple con API directa (imagen + fallback automático por inicial de name).
Dos variantes funcionales: Image (con src) y Fallback (sin src).
Tamaños definidos por diseño: sm=32px, md=36px (uso principal), lg=44px.
También podés usar la versión compuesta con AvatarImage y AvatarFallback para control total.
Props disponibles para Avatar.
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | — | URL de la imagen del avatar. Si existe, se renderiza la variante Image. |
alt | string | — | Texto alternativo de accesibilidad para la imagen. |
fallback | ReactNode | — | Contenido fallback cuando no hay imagen (por ejemplo iniciales). |
name | string | — | Nombre opcional para derivar automáticamente la inicial en fallback. |
size | 'sm' | 'md' | 'lg' | md | Tamaño del avatar: sm=32px, md=36px, lg=44px. |
imageClassName | string | — | Clases opcionales para AvatarImage interno (modo props directas). |
fallbackClassName | string | — | Clases opcionales para AvatarFallback interno (modo props directas). |
asChild | boolean | false | Renders the avatar as a child component, allowing full control over the underlying element. |
children | ReactNode | — | Contenido compuesto opcional (AvatarImage/AvatarFallback). |
className | string | — | Clases adicionales para el contenedor raíz. |
1{2 "name": "Avatar",3 "description": "Avatar para mostrar imágenes de perfil o iniciales.",4 "component": "Avatar",5 "files": [6 "components/base/data-display/lists/Avatar.tsx"7 ],8 "dependencies": [9 "react",10 "@radix-ui/react-avatar"11 ],12 "props": {13 "src": {14 "type": "string",15 "description": "URL de la imagen del avatar. Si existe, se renderiza la variante Image."16 },17 "alt": {18 "type": "string",19 "description": "Texto alternativo de accesibilidad para la imagen."20 },21 "fallback": {22 "type": "ReactNode",23 "description": "Contenido fallback cuando no hay imagen (por ejemplo iniciales)."24 },25 "name": {26 "type": "string",27 "description": "Nombre opcional para derivar automáticamente la inicial en fallback."28 },29 "size": {30 "type": "'sm' | 'md' | 'lg'",31 "default": "md",32 "description": "Tamaño del avatar: sm=32px, md=36px, lg=44px."33 },34 "imageClassName": {35 "type": "string",36 "description": "Clases opcionales para AvatarImage interno (modo props directas)."37 },38 "fallbackClassName": {39 "type": "string",40 "description": "Clases opcionales para AvatarFallback interno (modo props directas)."41 },42 "asChild": {43 "type": "boolean",44 "default": false,45 "description": "Renders the avatar as a child component, allowing full control over the underlying element."46 }47 }48}