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.

V
B
D
R
M
T
J
G
P
:)
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

Usage & Types

  • Version
  • Install
    npm install @pluralsight/ps-design-system-avatar
  • Import
    import Avatar from '@pluralsight/ps-design-system-avatar'
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