@contentful/f36-avatar

---

title: 'Avatar' type: 'component' status: 'alpha' slug: /components/avatar/ github: 'https://github.com/contentful/forma-36/tree/main/packages/components/avatar' storybook: 'https://f36-storybook.contentful.com/?path=/story/components-avatar--overview' typescript: ./src/Avatar.tsx

Avatar can be used to visually represent users and apps.

Import

import { Avatar, Size, Variant } from '@contentful/f36-avatar';

Examples

Variants

The Avatar can be rendered in different variants:

• User - default variant
• App - default variant

Sizes

The Avatar can be rendered in different sizes:

• Tiny - 20px
• Small - 24px
• Medium - 32px, default size
• Large - 48px

Show Color Border

The Avatar can be rendered with outline colors, the color is determined by the position of the Avatar. There are 6 different colors: green, red, yellow, orange, purple and gray

IsPrimary

The Avatar can be rendered with a special color border reserved for the current user

IsActive

This property modifies the opacity of the Avatar component when it is not active

Icons

An Avatar can display an icon on top of the image

Fallback

In some cases a user or an app will have no avatar to display. Instead, a fallback can be rendered when the src property is undefined (or an empty string "") and the loading state is not true.

Loading skeleton

When the avatar image is loading, a loading skeleton will be shown automatically. You can also force the loading state with the isLoading prop.

Props (API reference)

Accessibility

Make sure to pass a fitting alt property, especially if the avatar is used by itself without the user's name next to it.