Avatar
Exibe a imagem de perfil do usuário ou suas iniciais como fallback.
Demonstração
Tamanhos
Formas
Iniciais automáticas a partir do texto alternativo
Props
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
src | string | — | URL da imagem. |
alt | string | — | Texto alternativo da imagem; também usado para gerar iniciais automaticamente. |
fallback | string | — | Iniciais a exibir quando nenhuma imagem está disponível. |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Tamanho do avatar. |
shape | 'circle' | 'square' | 'circle' | Forma do avatar. |
Uso
import { Avatar } from '@ghiberti85/ui'
// With image
<Avatar src="/avatar.jpg" alt="Fernando Ghiberti" size="md" />
// With explicit fallback initials
<Avatar fallback="FG" size="md" />
// Auto-initials from alt text
<Avatar alt="Fernando Ghiberti" size="md" />
// → renders "FG"
// Sizes
<Avatar fallback="FG" size="xs" />
<Avatar fallback="FG" size="sm" />
<Avatar fallback="FG" size="md" />
<Avatar fallback="FG" size="lg" />
<Avatar fallback="FG" size="xl" />
// Square shape
<Avatar fallback="FG" shape="square" size="md" />