10.12.0

Avatar

Avatar displays a user's picture. This helps aid easy recognition of the user. This kit is normally not used by itself, but rather used within other kits.
The only time Avatar should be used instead of the User kit is when you are not going to display the user's name.

Default

Terry Johnson Standing

Terry Johnson Standing

Terry Johnson Standing

Terry Johnson Standing

Terry Johnson Standing

Terry Johnson Standing

Monogram


This is used when there is no avatar for a particular user.

Bad Image Link


A monagram is used as a fallback when an invalid or missing image url is provided.

Status

Terry Johnson Status

Terry Johnson Online

Terry Johnson Away

Terry Johnson Offline

The Status prop is used to display a user's online status like popular chat apps.


Things to Avoid

Avoid using Avatar with the user's name right next to it or under it. Use User kit instead. Do not use this kit for images that are not profile pictures.


Available Props

  • classname
  • dark
  • margin
  • margin_bottom
  • margin_left
  • margin_right
  • margin_top
  • margin_x
  • margin_y
  • max_width
  • padding
  • padding_bottom
  • padding_left
  • padding_right
  • padding_top
  • padding_x
  • padding_y
  • z_index
  • number_spacing
  • id
  • data
  • aria
  • children
  • image_url
  • image_alt
  • name
  • size
  • status