Fundamentos

Avatar

Foto de una persona con iniciales de respaldo cuando la imagen no carga.

import { Avatar, AvatarFallback, AvatarImage } from "sebs7n-ui/avatar"

Ejemplos

Con imagen y con iniciales

SFGHMR

import { Avatar, AvatarFallback, AvatarImage } from "sebs7n-ui/avatar"

function Basico() {
  return (
    <div className="flex items-center gap-4">
      <Avatar size="sm">
        <AvatarFallback>SF</AvatarFallback>
      </Avatar>
      <Avatar>
        <AvatarImage alt="" src="https://avatars.githubusercontent.com/u/9919?s=96&v=4" />
        <AvatarFallback>GH</AvatarFallback>
      </Avatar>
      <Avatar size="lg">
        <AvatarFallback>MR</AvatarFallback>
      </Avatar>
    </div>
  )
}

Props

Generadas del TypeScript del paquete. Solo las props propias: las heredadas del primitivo de Base UI o del elemento HTML están en la línea «hereda de».

Avatar

Hereda las props de Avatar.Root.

Prop	Tipo	Por defecto	Descripción
`size`	`"sm" \| "md" \| "lg"`	`"md"`
`className`	`string`	—

AvatarFallback

Hereda las props de Avatar.Fallback.

Prop	Tipo	Por defecto	Descripción
`className`	`string`	—

AvatarImage

Hereda las props de Avatar.Image.

Prop	Tipo	Por defecto	Descripción
`className`	`string`	—

Teclado

—: No es interactivo.

Accesibilidad

AvatarImage necesita alt. Si el nombre ya está al lado, alt="" para no repetirlo.
El fallback es siempre gris: un color por persona sería una señal que nadie puede interpretar.

Reglas de uso

Las iniciales, dos letras como máximo.
Dentro de un UserMenu ya viene armado: no lo rehagas.

Relacionados

UserMenu Sidebar