Avatar

An avatar is a thumbnail representation of a user or an organization.

  • Install
    npm install @pluralsight/ps-design-system-avatar
  • Import
    import Avatar from '@pluralsight/ps-design-system-avatar'

Examples

Sizes

Avatars are available in five sizes specified with the size prop.

import Avatar from '@pluralsight/ps-design-system-avatar'
import React from 'react'


function Example() {
  return (
    <div className="example-grid--col-5">
      <Avatar
        size="xLarge"
        name="Assis Silva"
        src="https://secure.gravatar.com/avatar/0f792a763ebf08411c7f566079e4adc7?s=400"
      />
      <Avatar
        size="large"
        name="Assis Silva"
        src="https://secure.gravatar.com/avatar/0f792a763ebf08411c7f566079e4adc7?s=400"
      />
      <Avatar
        size="medium"
        name="Assis Silva"
        src="https://secure.gravatar.com/avatar/0f792a763ebf08411c7f566079e4adc7?s=400"
      />
      <Avatar
        size="small"
        name="Assis Silva"
        src="https://secure.gravatar.com/avatar/0f792a763ebf08411c7f566079e4adc7?s=400"
      />
      <Avatar
        size="xSmall"
        name="Assis Silva"
        src="https://secure.gravatar.com/avatar/0f792a763ebf08411c7f566079e4adc7?s=400"
      />
    </div>
  )
}


export default Example

Fallback states

An avatar with an image is preferred. In cases where the image is unavailable or loading, the first initial of the person pictured will be displayed on a background of nine possible colors. Always provide the name prop as a fallback.

import Avatar from '@pluralsight/ps-design-system-avatar'
import React from 'react'


function Example() {
  return (
    <div className="example-grid--col-5">
      <Avatar size="medium" name="Vaughn Christensen" />
      <Avatar size="medium" name="Brie Cowan" />
      <Avatar size="medium" name="Darius Klein" />
      <Avatar size="medium" name="Ronnie Lindsey" />
      <Avatar size="medium" name="Michael Holden" />
      <Avatar size="medium" name="Teresa Brewer" />
      <Avatar size="medium" name="Jan Berg" />
      <Avatar size="medium" name="Grant Knight" />
      <Avatar size="medium" name="Penelope Taylor" />
      <Avatar size="medium" name="" />
    </div>
  )
}


export default Example

Accessibility

WCAG 2.1 AA Compliance

100% axe-core tests
Manual audit

Props

Name
Type
Description
Default
namestringused to generate intials as a fallback image
size
xSmall | small | medium | large | xLarge
avatar size (from Avatar.sizes)medium
srcstringURI or path to avatar image