Bain Logo

Avatar

Jump to Props

Present users in a visual way

Use the Avatar component when you need to represent a user. Avatars generally contain a profile photo of a user, but can take any value that a standard img element can take.

Import

Use

LorenzoPandoLucasLucasJennyJennyJenny

It is possible to pass custom size values, but you should try to stick to the preset sizes defined in the theme.

Options

You can adjust the size as well as borderRadius, boxShadow and space

Accessibility

You should always supply an alt tag to an image, as per the a11y alt text best practices.

Don't include language in your alt tag like "image of X" or "picture of X",

Do instead just describe the image itself. eg "A Beautiful Panda"

Props

  • Props
  • Styled Functions
PropTypeDefaultDescription
srcstring

Source url of the avatar image

altstring

Alternative text for the image

sizemicro | tiny | smaller | small | medium | largemedium

Size variant of the avatar

© 2021, Made with ❤️
by ADAPT @ Bain & Company
Privacy Policy