Avatar

Avatars are widely used, circular images that represent people online. Our <Avatar /> component is an extension of <Image />, but has some additional features. To use, import from @marvelapp/ui:

import { Avatar } from '@marvelapp/ui';

Initials

When you don’t provide a src it will fall back on initials. Therefore it’s important to always have the username or email prop. The initials also determine the background color of the placeholder.

<Avatar
  email="murat.mutlu@marvelapp.com"
  src={avatarUrl}
  username="Murat Mutlu"
/>

Size

The <Avatar /> component is always square. The size prop will set both the width and height.

<Avatar size={64} />
<Avatar size={48} />
<Avatar size={32} />
<Avatar size={24} />

Border

The <Avatar /> component’s border can be customised, to match the background it sits on.

<Avatar onlineDotBorderColor="snowExtraDark" />
<Avatar onlineDotBorderColor="black" />

Props