Skip to main content

Avatar

Examples

Basic

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

Alternative text
Code
<UnknownElementType
  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
<UnknownElementType initials="TLJ" />

With pre-rounded image

Ensures a transparent background if the image used has rounded corners and transparency.

Alternative text
Code
<UnknownElementType
  image={{
    alt: 'Alternative text',
    src: '/design-system/docs/images/rounded-avatar.webp'
  }}
  initials="TLJ"
/>

With Atoms

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

Alternative text
Code
<UnknownElementType
  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.