Skip to main content

Avatar

Examples

Basic

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/120/120'
  }}
  initials="TLJ"
/>

No image fallback

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

TLJ

Code
<Avatar initials="TLJ" />

With Atoms

The Avatar component has full access to all styling that the design system permits via the 'atoms' prop.

Alternative text

TLJ

Code
<Avatar
  atoms={{
    boxShadow: 'primary-large'
  }}
  image={{
    alt: 'Alternative text',
    src: 'https://picsum.photos/id/1052/120/120'
  }}
  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.