# Avatar

Foto de pessoa, com a inicial por trás.

A inicial não aparece de imediato: a Base UI espera um instante, para a foto que
carrega rápido não piscar a letra antes.

## No React Native

Traduz: o `@rivocode/ui-native` exporta `Avatar` - `src` remoto pela `Image` do core; `fallback` é obrigatório, porque é ele que aparece enquanto a foto baixa e se ela falhar. A API não é a mesma do web (no nativo tudo é controlado), e a [tabela de paridade](/react-native) diz o que muda peça a peça.

## Importação

```tsx
import { Avatar } from '@rivocode/ui'
```

## Exemplos

### Tamanhos

```tsx
import { Avatar } from '@rivocode/ui'

export function Sizes() {
  return (
    <div className="flex items-center gap-3">
      <Avatar size="sm" fallback="EB" />
      <Avatar fallback="CS" />
      <Avatar size="lg" fallback="RC" />
    </div>
  )
}
```

### Quem tem acesso

```tsx
import { Avatar, AvatarGroup } from '@rivocode/ui'

export function TeamAccess() {
  return (
    <AvatarGroup max={4}>
      <Avatar fallback="AP" />
      <Avatar fallback="CN" />
      <Avatar fallback="EB" />
      <Avatar fallback="MS" />
      <Avatar fallback="RT" />
      <Avatar fallback="JL" />
    </AvatarGroup>
  )
}
```

## Props

| Prop | Tipo | Obrigatória | Desde | O que faz |
| --- | --- | --- | --- | --- |
| `alt` | `string` |  | 0.4.0 | Descricao da foto. |
| `fallback` | `string` |  | 0.4.0 | O que aparece sem foto, ou enquanto ela carrega. |
| `render` | `ComponentRenderFn<HTMLProps, AvatarRootState> \| ReactElement<unknown, string \| JSXElementConstructor<any>>` |  | 0.4.0 | Allows you to replace the component's HTML element with a different tag, or compose it with another component. |
| `size` | `"lg" \| "md" \| "sm" \| null` |  | 0.4.0 |  |
| `src` | `string` |  | 0.4.0 |  |

Além dessas: repassa `className`, `style`, `id` e os demais atributos do elemento raiz.

## Partes

O componente se monta com as peças abaixo. Todas vêm de `@rivocode/ui`.

### AvatarGroup

A fila de pessoas de um lugar: quem participa, quem assinou, quem tem acesso.

Duas decisões moram na peça para não serem tomadas cinco vezes diferentes.

A sobreposição corta a inicial: com duas letras, o avatar de cima cobre a
segunda letra do de baixo e o que sobra é um borrão. A fila usa uma letra só, e
faz isso sozinha em vez de pedir que quem chama saiba disso.

O excedente vira "+n" e não some. Uma fila de três com mais dez escondidos mente
sobre o tamanho do grupo, e o número é justamente o que a pessoa procura ali.

| Prop | Tipo | Obrigatória | Desde | O que faz |
| --- | --- | --- | --- | --- |
| `max` | `number` |  | 0.5.0 | Quantos aparecem antes do "+n". |
| `size` | `"lg" \| "md" \| "sm" \| null` |  | 0.5.0 | O tamanho vale para a fila inteira, inclusive para o "+n". |

## Ver também

- [Accordion](/componentes/accordion.md)
- [AspectRatio](/componentes/aspect-ratio.md)
- [Card](/componentes/card.md)
- [Collapsible](/componentes/collapsible.md)
- [DataTable](/componentes/data-table.md)
- [DescriptionList](/componentes/description-list.md)
- [Convenções da biblioteca](/convencoes.md): Provider, tokens e as regras que valem para toda peça
- [Índice completo](/llms.txt)