Skip to main content

Avatar

Examples

Basic

View standalone

Simple avatar usage. By default this usage renders a <div>.

Alternative text

TLJ

Code
<Avatar
  image={{
    alt: 'Alternative text',
    src: 'https://picsum.photos/id/1052/60/60'
  }}
  initials="TLJ"
/>

No image fallback

View standalone

If no avatar image is available, show the user's intials as a fallback.

TLJ

Code
<Avatar initials="TLJ" />

Props

image

AvatarImageProps

The image property sets the value of the image and the alt text.

initials

string

The initials property sets the value of the initials.