Skip to content
Gusto’s condensed “G” logoWorkbench

Persona

Persona is a representation of an individual or a group with additional contextual information.
Figma logo
A pointing to the avatar within the persona; B pointing to the name of the individual; C pointing to the optional additional details of the individual
A Persona representing an individual
Anatomy of a Persona representing an individual
ItemNameDescription
A<Avatar />The <Avatar /> of the individual
BNameThe name of the individual
CDetailsAny additional details about the individual
A pointing to the Perople icon within the persona; B pointing to the name of the group; C pointing to the optional additional details of the group
A Persona representing a group
Anatomy of a Persona representing a group
ItemNameDescription
A<People />A <People /> icon representing a group of individuals
BNameThe name of the group
CDetailsAny additional details about the groupPersona
A Persona can be used to represent an individual or a group. At a minimum, a name is required for both variants.
Maria Mancini
Security

import React from 'react'


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


import type { Department } from './_testData'
import { getRandomDepartment, getRandomEmployee } from './_testData'


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


  return (
    <Flex gap={4} flexDirection="column">
      <Persona
        variant="individual"
        name={employee['Name-FL']}
        avatarSrc={employee.Avatar}
      />
      <Persona variant="group" name={department.Name} />
    </Flex>
  )
}
Additional details can be provided to give more context to the user or group.
Craig Ellis
Office Administrator
Sales
5 employees

import React from 'react'


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


import type { Department } from './_testData'
import { getRandomDepartment, getRandomEmployee } from './_testData'


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


  return (
    <Flex gap={4} flexDirection="column">
      <Persona
        variant="individual"
        name={employee['Name-FL']}
        avatarSrc={employee.Avatar}
      />
      <Persona variant="group" name={department.Name} />
    </Flex>
  )
}
Persona comes in three sizes: small, medium, and large.

Small

Alexis Muller
IT Specialist
Marketing
4 employees

Medium

Fabian Lupea
Office Operations
Sales
5 employees

Large

Phillip Carroll
Client Support Director
Security
1 employee

import React from 'react'


import { Flex, Heading, Persona } from '@gusto/workbench'


import type { Department } from './_testData'
import { getRandomDepartment, getRandomEmployee } from './_testData'


function formatDepartmentDetails(department: Department) {
  return `${department.Count} employee${department.Count > 1 ? 's' : ''}`
}


export const Sizes = () => {
  const employee1 = getRandomEmployee()
  const department1 = getRandomDepartment()
  const employee2 = getRandomEmployee()
  const department2 = getRandomDepartment()
  const employee3 = getRandomEmployee()
  const department3 = getRandomDepartment()


  return (
    <Flex gap={12} flexDirection="column">
      <Flex gap={4} flexDirection="column">
        <Heading level={3}>Small</Heading>
        <Persona
          name={employee1['Name-FL']}
          details={employee1.Title}
          avatarSrc={employee1.Avatar}
          size="small"
        />
        <Persona
          variant="group"
          name={department1.Name}
          details={formatDepartmentDetails(department1)}
          size="small"
        />
      </Flex>
      <Flex gap={4} flexDirection="column">
        <Heading level={3}>Medium</Heading>
        <Persona
          name={employee2['Name-FL']}
          details={employee2.Title}
          avatarSrc={employee2.Avatar}
          size="medium"
        />
        <Persona
          variant="group"
          name={department2.Name}
          details={formatDepartmentDetails(department2)}
          size="medium"
        />
      </Flex>
      <Flex gap={4} flexDirection="column">
        <Heading level={3}>Large</Heading>
        <Persona
          name={employee3['Name-FL']}
          details={employee3.Title}
          avatarSrc={employee3.Avatar}
          size="large"
        />
        <Persona
          variant="group"
          name={department3.Name}
          details={formatDepartmentDetails(department3)}
          size="large"
        />
      </Flex>
    </Flex>
  )
}
If no avatarSrc is provided for an individual, a default illustration will be shown. The avatarId prop ensures that the same illustration is used consistently with the individual across experiences.
Mark Brouwer
People Operations
Vinay Katwal
People Operations
Sergio Guevara
People Operations

import React from 'react'


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


import type { Department } from './_testData'
import { getRandomEmployee } from './_testData'


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


  return (
    <Flex gap={4} flexDirection="column">
      <Persona
        id={employee1.Email}
        name={employee1['Name-FL']}
        details={employee1.Title}
      />
      <Persona
        id={employee2.Email}
        name={employee2['Name-FL']}
        details={employee1.Title}
      />
      <Persona
        id={employee3.Email}
        name={employee3['Name-FL']}
        details={employee1.Title}
      />
    </Flex>
  )
}
React props
NameTypeDefaultDescription
name  Required
string
-The name of the individual or group that the Persona represents.
details  
ReactNode
-Additional contextual details about the individual or group that the Persona represents.
avatarId  
string
-The unique identifier of the Persona (i.e. user ID). This value provided is used to generate a unique fallback illustration for the Avatar. This prop is required if avatarSrc is not provided.
avatarSrc  
string
-A URL to use for the Avatar image. If this prop is not provided, a fallback illustration will be used. This prop is required if avatarId is not provided.
size  
smallmediumlarge
mediumThe size and density of the Persona component.