Avatar

Design
Recipe
React

Usage

Definition

An avatar is a representation of an individual user. It can be used as a link to an individual's account content.

Common Characteristics

Avatars are round and contain a scalable graphic or text. The avatar can be 24px (xs), 32px (sm), 40px (md), or 48px (lg).

Content

An avatar should contain a scalable image of the user. If an image is not available, the avatar should display the user's first and last initials. If neither is available, the avatar should display a generic person icon.

<SandboxDemo>
  <div style={{ display: 'flex', alignItems: 'center', gap: '10px', justifyContent: 'center' }}>
    <Avatar size="xs" />
    <Avatar size="sm" />
    <Avatar size="md" />
    <Avatar size="lg" />
  </div>
</SandboxDemo>

<SandboxDemo>
  <div style={{ display: 'flex', alignItems: 'center', gap: '10px', justifyContent: 'center' }}>
    <Avatar size="xs" name="Kristalena Yates" />
    <Avatar size="sm" name="Kristalena Yates" />
    <Avatar size="md" name="Kristalena Yates" />
    <Avatar size="lg" name="Kristalena Yates" />
  </div>
</SandboxDemo>

<SandboxDemo>
  <div style={{ display: 'flex', alignItems: 'center', gap: '10px', justifyContent: 'center' }}>
    <Avatar size="xs" image="https://i.pravatar.cc/200?u=_interstate_avatar_img" />
    <Avatar size="sm" image="https://i.pravatar.cc/200?u=_interstate_avatar_img" />
    <Avatar size="md" image="https://i.pravatar.cc/200?u=_interstate_avatar_img" />
    <Avatar size="lg" href="https://manheim.com" image="https://i.pravatar.cc/200?u=_interstate_avatar_img" />
  </div>
</SandboxDemo>

<SandboxDemo>
  <div style={{ display: 'flex', alignItems: 'center', gap: '10px', justifyContent: 'center' }}>
    <Avatar size="xs" href="https://manheim.com" image="https://i.pravatar.cc/200?u=_interstate_avatar_img" />
    <Avatar size="sm" href="https://manheim.com" image="https://i.pravatar.cc/200?u=_interstate_avatar_img" />
    <Avatar size="md" href="https://manheim.com" image="https://i.pravatar.cc/200?u=_interstate_avatar_img" />
    <Avatar size="lg" href="https://manheim.com" image="https://i.pravatar.cc/200?u=_interstate_avatar_img" />
  </div>
</SandboxDemo>

When displayed with text, maintain at least 8px space.

<SandboxDemo>
  <Avatar size="lg" inlineText="Welcome back, Kristalena" href="https://manheim.com" image="https://i.pravatar.cc/200?u=_interstate_avatar_img" />
</SandboxDemo>

Code

Default Avatar

<Avatar />

The default avatar size is small

Avatar Sizes

<div className='d-flex align-items-center justify-content-around interstate-docs__usage-demo'>
  <Avatar size='xs' />
  <Avatar size='sm' />
  <Avatar size='md' />
  <Avatar size='lg' />
</div>

The avatar can be 24px (xs), 32px (sm), 40px (md), or 48px (lg).

Avatar Initials

<div className='d-flex align-items-center justify-content-around interstate-docs__usage-demo'>
  <Avatar size='xs' name='Kristalena Yates' />
  <Avatar size='sm' firstName='Kristalena' lastName='Yates' />
  <Avatar size='md' initials='WR' />
  <Avatar
    size='lg'
    firstName='Kristalena'
    lastName='Yates'
    image='https://i.pravatar.cc/200?u=_interstate_avatar_img'
  />
</div>

The avatar will display initials from a variety of properties. If an image is provided, the name is moved to the alt attribute of the image.

All Name Attributes

Without Image

<div className='d-flex align-items-center justify-content-around align-content-around interstate-docs__usage-demo'>
  <Avatar
    size='xs'
    initials='WR'
    name='Dorothee Dennis'
    firstName='Kristalena'
    lastName='Yates'
  />
  <Avatar
    size='sm'
    initials='WR'
    name='Dorothee Dennis'
    firstName='Kristalena'
    lastName='Yates'
  />
  <Avatar
    size='md'
    initials='WR'
    name='Dorothee Dennis'
    firstName='Kristalena'
    lastName='Yates'
  />
  <Avatar
    size='lg'
    initials='WR'
    name='Dorothee Dennis'
    firstName='Kristalena'
    lastName='Yates'
  />
</div>

Display of initials are read in the following order: initials, firstName + lastName, followed by name.

With Image

<div
  style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}
>
  <Avatar
    size='xs'
    initials='WR'
    name='Dorothee Dennis'
    firstName='Kristalena'
    lastName='Yates'
    image='https://i.pravatar.cc/200?u=_interstate_avatar_img'
  />
  <Avatar
    size='sm'
    initials='WR'
    name='Dorothee Dennis'
    firstName='Kristalena'
    lastName='Yates'
    image='https://i.pravatar.cc/200?u=_interstate_avatar_img'
  />
  <Avatar
    size='md'
    initials='WR'
    name='Dorothee Dennis'
    firstName='Kristalena'
    lastName='Yates'
    image='https://i.pravatar.cc/200?u=_interstate_avatar_img'
  />
  <Avatar
    size='lg'
    initials='WR'
    name='Dorothee Dennis'
    firstName='Kristalena'
    lastName='Yates'
    image='https://i.pravatar.cc/200?u=_interstate_avatar_img'
  />
</div>

If an image is provided, regardless of other props, the image will be displayed. The alt attribute of the image is set to the name property followed by concatenating the firstName and lastName.

Displaying a Message with Avatar

<Avatar
  size='lg'
  inlineText='Welcome back, Kristalena!'
  image='https://i.pravatar.cc/200?u=_interstate_avatar_img'
/>

Making the Avatar a Link

<div
  style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}
>
  <Avatar size='lg' href='http://manheim.com' />
  <Avatar
    size='lg'
    inlineText='Welcome back, Kristalena!'
    href='http://manheim.com?'
  />
</div>

Props

All props are optional. If all props are omitted a default avatar image will be shown.

Name	Type	Default	Description
size	`string`	`"sm"`	Sets the avatar size to xs, sm, md or lg. When omitted, the default avatar size is small (sm).
initials	`string`	`null`	Displays the user's first and/or last name initials on the avatar. This prop takes precedence over the firstName, lastName and name props
firstName	`string`	`null`	Displays the user's first name initial on the avatar when an image prop is not provided. This prop takes precedence over the name prop.
lastName	`string`	`null`	Displays the user's last name initial on the avatar when an image prop is not provided. This prop takes precedence over the name prop.
name	`string`	`null`	Displays the user's first and/or last name initials on the avatar when an image, firstName, lastName or initials prop is not provided.
image	`string`	`null`	Sets the url for the avatar image. This prop takes precedence over the initials, firstName, lastName and name props.
href	`string`	`null`	Sets the url a user is linked to when clicking the avatar.
inlineText	`string`	`null`	Sets the inline text displayed to the right of the avatar.

Definition

An avatar is a representation of an individual user. It can be used as a link to an individual’s account content.

An avatar should contain a scalable image of the user. If an image is not available, the avatar should display the user’s first and last initials. If neither is available, the avatar should display a generic person icon.

Ingredients

Avatars are made up of a combination of elements and classes. The styles will be made up of Required, Selectable, and Optional classes.

Required

.avatar - An element that contains the initials as text

Selectable

sizes

Avatar is available in a specific range of sizes (XS - LG) and uses the following class names:

.avatar-xs - Extra Small
.avatar-sm - Small
.avatar-md - Medium
.avatar-lg - Large

Optional

variant

.avatar-img - A background image within the url in the wrapper
.avatar-icon - A child element which specifies the icon
.avatar-clickable - Used when the Avatar is actionable.

Directions

Avatar with an Icon

When an Avatar is without text or an image, it ought to be an icon. This example displays a small avatar.

Avatar with text

When an Avatar is used with a name, the initials are presented (limited to two letters).

Avatar with an Image and is Clickable

When an Avatar has an Image available, it is done so with a --bg-image CSS custom property. This example shows as clickable as well as large.

Developer Kitchen

Now it's your turn! Select options for the Avatar component and see how they can be combined in the final output.

label

size

style

Is Clickable?

Usage​

Definition​

Common Characteristics​

Content​

Code​

Default Avatar​

Avatar Sizes​

Avatar Initials​

All Name Attributes​

Without Image​

With Image​

Displaying a Message with Avatar​

Making the Avatar a Link​

Props​

Definition​

Ingredients​

Required​

Selectable​

sizes​

Optional​

variant​

Directions​

Avatar with an Icon​

Avatar with text​

Avatar with an Image and is Clickable​

Developer Kitchen​

React​

Usage

Definition

Common Characteristics

Content

Code

Default Avatar

Avatar Sizes

Avatar Initials

All Name Attributes

Without Image

With Image

Displaying a Message with Avatar

Making the Avatar a Link

Props

Definition

Ingredients

Required

Selectable

sizes

Optional

variant

Directions

Avatar with an Icon

Avatar with text

Avatar with an Image and is Clickable

Developer Kitchen

React