Avatar

Component for displaying user avatars with various sizes

function AvatarExample() {
  return (
    <Avatar
      imageUrl="/ui-components/img/avatar.png"
      username="Puppy"
      size="extra-large"
    />
  );
}

Props

username

required

Typestring

Provide to use it as alt of the image for better a11y

imageUrl

Typestring

Image URL

size

Type'extra-large' | 'large' | 'medium' | 'small'

Default'extra-large'

Size of the circle container

CSS Variables

Color

--ax-public-avatar-background-color

--ax-public-avatar-border-color

Size

--ax-public-avatar-border-size