Avatar

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.

KY

KY

KY

KY

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

Welcome back, Kristalena

Code

Default Avatar

Live Editor

<Avatar />

<Avatar />

Result

Loading...

The default avatar size is small

Avatar Sizes

Live Editor

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

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

Result

Loading...

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

Avatar Initials

Live Editor

<div className="d-flex align-items-center justify-content-around prism-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=_prism_avatar_img" /> </div>

<div className="d-flex align-items-center justify-content-around prism-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=_prism_avatar_img" />
</div>

Result

Loading...

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

Live Editor

<div className="d-flex align-items-center justify-content-around align-content-around prism-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>

<div className="d-flex align-items-center justify-content-around align-content-around prism-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>

Result

Loading...

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

With Image

Live Editor

<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=_prism_avatar_img" /> <Avatar size="sm" initials="WR" name="Dorothee Dennis" firstName="Kristalena" lastName="Yates" image="https://i.pravatar.cc/200?u=_prism_avatar_img" /> <Avatar size="md" initials="WR" name="Dorothee Dennis" firstName="Kristalena" lastName="Yates" image="https://i.pravatar.cc/200?u=_prism_avatar_img" /> <Avatar size="lg" initials="WR" name="Dorothee Dennis" firstName="Kristalena" lastName="Yates" image="https://i.pravatar.cc/200?u=_prism_avatar_img" /> </div>

<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=_prism_avatar_img"
  />
  <Avatar
    size="sm"
    initials="WR"
    name="Dorothee Dennis"
    firstName="Kristalena"
    lastName="Yates"
    image="https://i.pravatar.cc/200?u=_prism_avatar_img"
  />
  <Avatar
    size="md"
    initials="WR"
    name="Dorothee Dennis"
    firstName="Kristalena"
    lastName="Yates"
    image="https://i.pravatar.cc/200?u=_prism_avatar_img"
  />
  <Avatar
    size="lg"
    initials="WR"
    name="Dorothee Dennis"
    firstName="Kristalena"
    lastName="Yates"
    image="https://i.pravatar.cc/200?u=_prism_avatar_img"
  />
</div>

Result

Loading...

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

Live Editor

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

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

Result

Loading...

Making the Avatar a Link

Live Editor

<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>

<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>

Result

Loading...

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.