Skip to content
Gusto’s condensed “G” logoWorkbench

Avatar

Avatar is a visual representation of a user that displays an image or a fallback illustration.
Figma logo

import React from 'react'


import { Avatar } from '@gusto/workbench'


import { getRandomEmployee } from './_testData'


export const Basic = () => {
  const employee = getRandomEmployee()


  return <Avatar avatarId={employee.Email} src={employee.Avatar} />
}
Avatar comes in three sizes: small, medium, and large.

import React from 'react'


import { Avatar, Flex } from '@gusto/workbench'


import { getRandomEmployee } from './_testData'


export const Sizes = () => {
  const employee1 = getRandomEmployee()
  const employee2 = getRandomEmployee()
  const employee3 = getRandomEmployee()


  return (
    <Flex gap={4} alignItems="flex-end">
      <Avatar avatarId={employee1.Email} src={employee1.Avatar} size="small" />
      <Avatar avatarId={employee2.Email} src={employee2.Avatar} size="medium" />
      <Avatar avatarId={employee3.Email} src={employee3.Avatar} size="large" />
    </Flex>
  )
}
When no src is provided, a fallback illustration will be used. Which illustration is used is based on the avatarId prop. The same avatarId will always result in the same fallback illustration.

import React from 'react'


import { Avatar, Flex } from '@gusto/workbench'


import { getRandomEmployee } from './_testData'


export const FallbackAvatars = () => {
  const employee1 = getRandomEmployee()
  const employee2 = getRandomEmployee()
  const employee3 = getRandomEmployee()


  return (
    <Flex gap={4}>
      <Avatar avatarId={employee1.Email} size="medium" />
      <Avatar avatarId={employee2.Email} size="medium" />
      <Avatar avatarId={employee3.Email} size="medium" />
    </Flex>
  )
}
React props
NameTypeDefaultDescription
avatarId  
string
-The unique identifier of the Avatar (i.e. user ID). This value provided is used to generate a unique fallback illustration.
src  
string
-A URL to use as the Avatar image. If this prop is not provided, a fallback illustration will be used.
size  
smallmediumlarge
smallThe size preset based on common use cases. This can be overriden by the height and width props.
height  
number
-The height of the Avatar in pixels. Using this prop will override any size passed to Avatar.
width  
number
-The width of the Avatar in pixels. Using this prop will override any size passed to Avatar.