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.

<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
<Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
<Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />

Avatares com letras

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

<Avatar>H</Avatar>
<Avatar sx={{ bgcolor: deepOrange[500] }}>N</Avatar>
<Avatar sx={{ bgcolor: deepPurple[500] }}>OP</Avatar>

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

<Avatar {...stringAvatar('Kent Dodds')} />
<Avatar {...stringAvatar('Jed Watson')} />
<Avatar {...stringAvatar('Tim Neutkens')} />

Tamanhos

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

<Avatar
  alt="Remy Sharp"
  src="/static/images/avatar/1.jpg"
  sx={{ width: 24, height: 24 }}
/>
<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
<Avatar
  alt="Remy Sharp"
  src="/static/images/avatar/1.jpg"
  sx={{ width: 56, height: 56 }}
/>

Avatares com ícones

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

<Avatar>
  <FolderIcon />
</Avatar>
<Avatar sx={{ bgcolor: pink[500] }}>
  <PageviewIcon />
</Avatar>
<Avatar sx={{ bgcolor: green[500] }}>
  <AssignmentIcon />
</Avatar>

Variantes

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

<Avatar sx={{ bgcolor: deepOrange[500] }} variant="square">
  N
</Avatar>
<Avatar sx={{ bgcolor: green[500] }} variant="rounded">
  <AssignmentIcon />
</Avatar>

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

<Avatar
  sx={{ bgcolor: deepOrange[500] }}
  alt="Remy Sharp"
  src="/broken-image.jpg"
>
  B
</Avatar>
<Avatar
  sx={{ bgcolor: deepOrange[500] }}
  alt="Remy Sharp"
  src="/broken-image.jpg"
/>
<Avatar src="/broken-image.jpg" />

Agrupamento

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

<AvatarGroup max={4}>
  <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
  <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
  <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
  <Avatar alt="Agnes Walker" src="/static/images/avatar/4.jpg" />
  <Avatar alt="Trevor Henderson" src="/static/images/avatar/5.jpg" />
</AvatarGroup>

Total avatars

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

+20

<AvatarGroup total={24}>
  <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
  <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
  <Avatar alt="Agnes Walker" src="/static/images/avatar/4.jpg" />
  <Avatar alt="Trevor Henderson" src="/static/images/avatar/5.jpg" />
</AvatarGroup>

Com emblema

<StyledBadge
  overlap="circular"
  anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
  variant="dot"
>
  <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
</StyledBadge>
<Badge
  overlap="circular"
  anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
  badgeContent={
    <SmallAvatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
  }
>
  <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
</Badge>