AvatarLabel

Avatar con nombre y una línea de apoyo (correo, rol), para cabeceras de menú, filas de tabla y la ficha de usuario del sidebar.

Cuándo usarlo

Props. Las de Avatar más name y supporting. Nombre text-sm-semibold en text-primary; apoyo text-sm-regular en text-tertiary.

Ejemplos

ADResponsable de seguridadadmin@jotis.me

Props

Prop	Tipo	Por defecto	Descripción
`name`obligatoria	`ReactNode`	—	Nombre, en `text-sm` semibold y `text-primary`.
`supporting`	`ReactNode`	—	Línea de apoyo (correo, rol), en `text-tertiary`.
`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"`	—	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 { AvatarLabel } from "@jotis-me/react";

export default function Page() {
	return (
		<>
			<AvatarLabel initials="AD" name="Responsable de seguridad" supporting="admin@jotis.me" />
		</>
	);
}

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

<AvatarLabel initials="AD" name="Responsable de seguridad" supporting="admin@jotis.me" />