Avatar

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

Avatares de Imágenes

Image avatars can be created by passing standard img props src or srcSet to the component.

<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

Avatars containing simple characters can be created by passing a string as children.

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

Tamaños

You can change the size of the avatar with the height and width CSS properties.

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

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>

Variants

If you need square or rounded avatars, use the variant prop.

<Avatar variant="square" className={classes.square}>
  N
</Avatar>
<Avatar variant="rounded" className={classes.rounded}>
  <AssignmentIcon />
</Avatar>

Fallbacks

If there is an error loading the avatar image, the component falls back to an alternative in the following order:

the provided children
the first letter of the alt text
a generic avatar icon

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

Grouped

AvatarGroup renders its children as a stack.

<AvatarGroup max={3}>
  <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="Cindy Baker" src="/static/images/avatar/3.jpg" />
</AvatarGroup>