Avatar

Foto o iniciales de una persona en círculo, de 24 a 64px.

Cuándo usarlo

Props. src + alt, o initials; sin ninguno muestra el icono de usuario. size (xs 24 · sm 32 · md 40 · lg 48 · xl 56 · 2xl 64), status (online · offline), ring (anillo bg-primary para apilar).

Notas. El fondo de iniciales es avatar-styles-bg-neutral con texto bg-secondary-solid (#525252, fijo en ambos temas porque el fondo también lo es); borde interior de 0,5px al 16% negro para que la foto no se funda con el fondo.

Ejemplos

ABCDEF+3

Props

Prop	Tipo	Por defecto	Descripción
`src`	`string`	—	Foto. Sin `src` ni `initials` se muestra el icono de usuario.
`alt`	`string`	—	Texto alternativo de la foto, o nombre accesible de las iniciales.
`initials`	`string`	—
`size`	`"xs" · "sm" · "md" · "lg" · "xl" · "2xl"`	`md`	Diámetro: `xs` 24 · `sm` 32 · `md` 40 · `lg` 48 · `xl` 56 · `2xl` 64.
`status`	`"online" · "offline"`	—	Punto de estado abajo a la derecha.
`statusLabel`	`string`	—	Texto del estado para lectores de pantalla. Por defecto, "En línea" o "Desconectado".
`ring`	`boolean`	—	Anillo `bg-primary` para apilar avatares.
`className`	`string`	—

Código

import { Avatar } from "@jotis-me/react";

export default function Page() {
	return (
		<>
			<Avatar initials="AD" alt="Administrador" status="online" />
		</>
	);
}

---
import { Avatar } from "@jotis-me/react";
---

<Avatar initials="AD" alt="Administrador" status="online" />