Avatar

Display a profile image or initials related to a person. If the image fails to load, it will fallback to the initials.

Props

className

String

[Empty string]

initials

String

required

size

'xsmall' │ 'small' │ 'medium' │ 'large'

'large'

thumbnail

String

Examples

Size Modifiers

<div className="docs-inline-group">
  <Avatar initials="GK" size="large" />
  <Avatar initials="GK" size="medium" />
  <Avatar initials="GK" size="small" />
</div><div className="docs-inline-group">
  <Avatar initials="GK" size="large" />
  <Avatar initials="GK" size="medium" />
  <Avatar initials="GK" size="small" />
</div>

Display Profile Image

<Avatar
  initials="GK"
  thumbnail="http://images.kw.com/shared/kw/bios/Cropped/Gary_Keller_Color_250X200.jpg"
/><Avatar
  initials="GK"
  thumbnail="http://images.kw.com/shared/kw/bios/Cropped/Gary_Keller_Color_250X200.jpg"
/>

Avatar

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Props

Examples

Size Modifiers

Display Profile Image

Props