Pular para o conteúdo

Avatar

Os avatares são encontrados ao longo do material design, com usos em tudo, desde tabelas até menus de diálogo.

Avatares com imagens

Avatares com imagem podem ser criados utilizando as propriedades padrões img, src ou srcSet do componente.

Remy Sharp
Travis Howard
Cindy Baker
Press Enter to start editing

Avatares com letras

Avatares com letras podem ser criados passando sua string como children.

H
N
OP
Press Enter to start editing

You can use different background colors for the avatar. The following demo generates the color based on the name of the person.

KD
JW
TN
Press Enter to start editing

Tamanhos

Você pode alterar o tamanho do avatar com as propriedades CSS height e width.

Remy Sharp
Remy Sharp
Remy Sharp
Press Enter to start editing

Avatares com ícones

Avatares com ícones são criados passando o ícone como children.

Press Enter to start editing

Variantes

Se você precisa de avatares com cantos quadrados ou arredondados, use a propriedade variant.

N
Press Enter to start editing

Contingências (Fallbacks)

Se houver um erro ao carregar a imagem do avatar, o componente escolhe uma alternativa na seguinte ordem:

  • o componente children fornecido
  • a primeira letra do texto alt
  • um ícone genérico de avatar
Remy Sharp
Remy Sharp
Press Enter to start editing

Agrupamento

AvatarGroup renders its children as a stack. Use the max prop to limit the number of avatars.

+2
Cindy Baker
Travis Howard
Remy Sharp
Press Enter to start editing

Total avatars

If you need to control the total number of avatars not shown, you can use the total prop.

+20
Trevor Henderson
Agnes Walker
Travis Howard
Remy Sharp
Press Enter to start editing

Com emblema

Remy Sharp
Travis Howard
Remy Sharp
Press Enter to start editing