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.

<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.

<Avatar>H</Avatar>
<Avatar className={classes.orange}>N</Avatar>
<Avatar className={classes.purple}>OP</Avatar>

Tamaños

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

<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" className={classes.small} />
<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" className={classes.large} />

Avatares de iconos

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

<Avatar>
  <FolderIcon />
</Avatar>
<Avatar className={classes.pink}>
  <PageviewIcon />
</Avatar>
<Avatar className={classes.green}>
  <AssignmentIcon />
</Avatar>

Variantes

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

<Avatar variant="square" className={classes.square}>
  N
</Avatar>
<Avatar variant="rounded" className={classes.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

<Avatar alt="Remy Sharp" src="/broken-image.jpg" className={classes.orange}>
  B
</Avatar>
<Avatar alt="Remy Sharp" src="/broken-image.jpg" className={classes.orange} />
<Avatar src="/broken-image.jpg" />

Agrupado

AvatarGroup renderiza sus componentes hijos como una pila.

<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>