Saltar al contenido

Avatar

Los avatares se pueden encontrar a lo largo de todo Material Design con usos en todo desde tablas hasta diálogos de menús.

Avatares de Imágenes

Las imágenes de avatar pueden ser creadas pasándoles las propiedades estándar de img, src o srcSet al componente.

Remy Sharp
Travis Howard
Cindy Baker
<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 de Letras

Los avatares que contengan carácteres simples pueden ser creados pasándoles un string como children.

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

Tamaños

Puedes cambiar el tamaño del avatar con las propiedades de CSS height y width.

Remy Sharp
Remy Sharp
Remy Sharp
<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 de iconos

Los avatares de íconos son creados pasando un ícono como children.

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

Variantes

Si necesitas avatares cuadrados o redondeados, utiliza la prop variant.

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

Fallbacks

Si hay un error cargando la imagen del avatar, el componente recurre a una alternativa en el siguiente orden:

  • los componentes hijos proporcionados
  • la primera letra del texto alt
  • una imagen de avatar generica
Remy Sharp
Remy Sharp
<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" />

Agrupado

AvatarGroup renderiza sus componentes hijos como una pila.

+2
Cindy Baker
Travis Howard
Remy Sharp
<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>

Con Badge

Remy Sharp
Travis Howard
Remy Sharp
<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>