Todos los componentes (204)

Avatar

Superficies · Avatar · .amset-avatar

Qué es y cuándo usarlo

La cara, o las iniciales, de una persona. Si no hay foto, si falla al cargar o mientras llega, se ven las iniciales: nunca un hueco en blanco ni un icono roto. Cuando la foto carga, se funde por encima.

Cuándo usarlo

Junto a quien escribe, firma o tiene algo asignado. Si el nombre ya está escrito al lado, decorative, para que no se lea dos veces.
Las iniciales salen solas: la primera del nombre y la del último apellido, saltándose las partículas («María de la Fuente» es MF). Si el nombre no tiene ninguna letra, sale el icono de persona. content pone otra cosa en su lugar (un icono).
Sin tone (por defecto) sale del nombre un color estable: el mismo nombre sale siempre del mismo color. tone lo fija con cualquiera de los ocho tonos comunes.
variant: soft (fondo claro del tono, por defecto) o solid (relleno fuerte con las iniciales en blanco). shape: circle (por defecto) o square.
state pinta el punto de presencia: inline (en línea), away, busy u offline (un aro hueco, no un punto gris).
onError avisa con la dirección de la foto si no se puede cargar.

Cuándo no

Varias personas juntas: AvatarGroup, que las apila con un «+N» que dice quiénes faltan.
La foto de un producto o de un adjunto: Thumbnail.

Teclado: no es enfocable ni interactivo.

Accesibilidad: es una imagen (role="img") con el nombre como texto alternativo. Con state, el estado va en el nombre («Marta Ruiz (ocupado)»), no solo en el color del punto. La foto lleva alt="", porque el nombre ya lo da el contenedor. decorative lo saca del árbol accesible (aria-hidden).

Aspecto fino: variables CSS --amset-avatar-*: -size (el lado: 24, 30, 36, 48 o 64 px según size, de xs a xl), -text (el cuerpo de las iniciales), -radius (el del square) y -ring, el color del borde que lo separa de lo de detrás (el punto de estado y los vecinos de un grupo): cámbialo si el avatar va sobre algo que no es la superficie. Los colores del tono, en --amset-avatar-tone, -tone-soft, -tone-solid y -tone-ink.

Cómo se ve

Ada LovelaceFacturación · en línea

Grace HopperAlmacén · ausente

Alan TuringSoporte · ocupado

<Avatar name="Ada Lovelace" size="xs" />
<Avatar name="Grace Hopper" size="sm" tone="success" />
<Avatar name="Equipo de soporte" shape="square" size="lg" />

<ItemGroup label="Quien esta en el equipo" separated>
  <Item
    title="Ada Lovelace"
    description="Facturacion · en linea"
    media={<Avatar name="Ada Lovelace" size="sm" state="online" />}
    mediaKind="avatar"
  />
</ItemGroup>

Props

Se importa con import { Avatar } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`name`obligatoria	`string`	De aqui salen las iniciales y el texto alternativo. Obligatorio.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`content`	`ReactNode`	En lugar de las iniciales: un icono, un emoji, una letra propia.
`decorative`	`boolean`	Cuando el nombre ya esta escrito al lado: el avatar deja de anunciarse y no se repite dos veces lo mismo.
`onError`	`(src: string) => void`	Avisa de que la foto de `src` no ha cargado, con su direccion. El avatar ya se queda en iniciales por su cuenta: esto es para quien quiere reintentar con otra direccion o dejar constancia. Una foto nueva vuelve a intentarlo.
`shape`	`AvatarShape`	—
`size`	`"sm" \| "md" \| "lg" \| "xs" \| "xl"`	De 24 a 64 px: `xs`, `sm`, `md` (36, por defecto), `lg` y `xl`.
`src`	`string`	—
`state`	`AvatarStatus`	Punto de presencia en la esquina. Lleva su texto, no solo el color.
`tone`	`"neutral" \| "accent" \| "secondary" \| "tertiary" \| "info" \| "success" \| "warning" \| "error"`	Sin tono, sale del nombre un color estable (`tonoDeNombre`).
`variant`	`AvatarVariant`	—

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

Mandos

Estas variables CSS son la forma de adaptarlo. Se declaran sobre el selector del componente, no en :root: la hoja las redeclara en la propia regla y una declaración en el mismo elemento gana siempre.

Variable	Por defecto
`--amset-avatar-tone`	`var(--amset-ink)`
`--amset-avatar-tone-soft`	`var(--amset-divider)`
`--amset-avatar-tone-solid`	`var(--amset-ink)`
`--amset-avatar-tone-ink`	`var(--amset-surface)`
`--amset-avatar-size`	`2.25rem`
`--amset-avatar-text`	`var(--amset-text-base)`
`--amset-avatar-radius`	`var(--amset-radius)`
`--amset-avatar-ring`	`var(--amset-surface)`
`--amset-avatar-background`	`var(--amset-avatar-tone-soft)`
`--amset-avatar-ink`	`var(--amset-avatar-tone)`

Cómo se cambia

.amset-avatar {
  --amset-avatar-tone: ...;
  --amset-avatar-tone-soft: ...;
}

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: