Avatar

Interface of Avatar
🏗 Coming Soon

Avatar is most often used to identify individual users or groups. Lens offers three variations on it:

  • AvatarUser displays the profile image, if there is one available, or the user's initials.
  • AvatarIcon displays an icon as the avatar, which can be selected with the icon prop, and has the User icon as default.
  • AvatarCombo displayed AvatarUser or AvatarIcon with secondary AvatarIcon connected to it.

Accessibility

If you're an Avatar as a clickable-target use role="button". This will help with usability and accessibility.

AvatarUser

Takes a User object as specified by Looker's SDK and produces an Avatar. The minimum keys in object are avatar_url, first_name and last_name. If the user in question has a blank image (Gravatar's default if the user hasn't yet selected a profile picture) the user's initials will be used instead of the image.

AvatarIcon

Has a default icon value of User. That value can be specified by setting the icon property.

Size

Both AvatarIcon and AvatarUser can have a specify a size. Possible values are xxsmall, xsmall, small, medium or large and small is the default value. If you specify xxsmall for AvatarUser will only display the first initial.

Color

Avatars allow the developer to specify a color to use. Default Colors:

  • AvatarIcon: keyFocus
  • AvatarUser: key

AvatarCombo

A combination of AvatarUser and AvatarIcon.

  • secondaryIcon - icon used for secondary avatar. Default: User
  • secondaryColor - color to use for secondary avatar border & icon. Default: key
  • secondaryBg - color to use for secondary avatar background. Default: inverseOn