# Avatar

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

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

## Ejemplos

### Con imagen y con iniciales

```tsx
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

### 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

| Tecla | Qué hace |
|---|---|
| — | 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

[user-menu](/docs/components/user-menu.md) · [sidebar](/docs/components/sidebar.md)