Avatar

Avatar can be used to visually represent users and apps.

Import

import { Avatar } from '@contentful/f36-avatar';
// or
import { Avatar } from '@contentful/f36-component';

Examples

Variants

The Avatar can be rendered in different variants:

  • User - default variant
  • App

Sizes

The Avatar can be rendered in different sizes:

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

Color Border

By default, the Avatar is rendered with a thin gray border. You can change the border to be one of 9 different colors: blue, purple, orchid, strawberry, orange, gold, olive, green, ocean

Special style variant muted

This property modifies the opacity of the Avatar component to indicate activity state.

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)

Open in Storybook

Name

Type

Default

alt
string

className
string

CSS class to be appended to the root element

colorVariant
"primary"
"muted"
"green"
"orange"
"yellow"
"purple"
"gray"
"pink"
"emerald"
"lavender"

'gray'
icon
ReactElement<any, string | JSXElementConstructor<any>>

initials
string

isLoading
false
true

false
size
"small"
"tiny"
"medium"
"large"
`${number}px`

Use the available sizes or a numerical custom one, e.g. '52px'

'medium'
src
string

testId
string

A [data-test-id] attribute used for testing purposes

tooltipProps
CommonProps & WithEnhancedContent & Omit<TooltipInternalProps, "children">

A tooltipProps attribute used to conditionally render the tooltip around root element

variant
"app"
"user"

'user'

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.