Components

Avatar(React)

Display user images and badges on Thumbtack.

Version:7.0.1 View sourceChangelogReport issue
Install:yarn add @thumbtack/thumbprint-react
Import:import { UserAvatar, EntityAvatar } from '@thumbtack/thumbprint-react';

Avatar variations

Avatars are available as two components: UserAvatar and EntityAvatar.

<div className="flex">
    <div className="mr3">
        <EntityAvatar imageUrl="https://www.placecage.com/640/480" size="xlarge" />
    </div>
    <div>
        <UserAvatar imageUrl="https://www.placecage.com/640/480" size="xlarge" />
    </div>
</div>

UserAvatar is for people or users whereas EntityAvatar is for companies, businesses, or services.

Avatar sizes

Both UserAvatar and EntityAvatar are available in five sizes ranging from xlarge to xsmall.

<>
    <div className="flex items-center mb4">
        <div className="mr3">
            <UserAvatar imageUrl="https://www.placecage.com/640/480" size="xlarge" />
        </div>
        <div className="mr3">
            <UserAvatar imageUrl="https://www.placecage.com/640/480" size="large" />
        </div>
        <div className="mr3">
            <UserAvatar imageUrl="https://www.placecage.com/640/480" size="medium" />
        </div>
        <div className="mr3">
            <UserAvatar imageUrl="https://www.placecage.com/640/480" size="small" />
        </div>
        <div className="mr3">
            <UserAvatar imageUrl="https://www.placecage.com/640/480" size="xsmall" />
        </div>
    </div>
    <div className="flex items-center">
        <div className="mr3">
            <EntityAvatar imageUrl="https://www.placecage.com/640/480" size="xlarge" />
        </div>
        <div className="mr3">
            <EntityAvatar imageUrl="https://www.placecage.com/640/480" size="large" />
        </div>
        <div className="mr3">
            <EntityAvatar imageUrl="https://www.placecage.com/640/480" size="medium" />
        </div>
        <div className="mr3">
            <EntityAvatar imageUrl="https://www.placecage.com/640/480" size="small" />
        </div>
        <div className="mr3">
            <EntityAvatar imageUrl="https://www.placecage.com/640/480" size="xsmall" />
        </div>
    </div>
</>

Avatars without images

Avatars without images can display the the user or entity’s initials instead. The initals are assigned to a color based on the first letter in the initials prop.

AA
BA
CA
DA
EA
HA
A
B
C
D
E
F
<>
    <div className="flex mb4">
        <div className="mr2">
            <UserAvatar initials="AA" size="large" />
        </div>
        <div className="mr2">
            <UserAvatar initials="BA" size="large" />
        </div>
        <div className="mr2">
            <UserAvatar initials="CA" size="large" />
        </div>
        <div className="mr2">
            <UserAvatar initials="DA" size="large" />
        </div>
        <div className="mr2">
            <UserAvatar initials="EA" size="large" />
        </div>
        <div>
            <UserAvatar initials="HA" size="large" />
        </div>
    </div>
    <div className="flex">
        <div className="mr2">
            <EntityAvatar initial="A" size="large" />
        </div>
        <div className="mr2">
            <EntityAvatar initial="B" size="large" />
        </div>
        <div className="mr2">
            <EntityAvatar initial="C" size="large" />
        </div>
        <div className="mr2">
            <EntityAvatar initial="D" size="large" />
        </div>
        <div className="mr2">
            <EntityAvatar initial="E" size="large" />
        </div>
        <div>
            <EntityAvatar initial="F" size="large" />
        </div>
    </div>
</>

Avatar badges

Badges can be added to avatars to denote information including hired status and online status.

Online

This badge indicates that a user or entity is online.

<div>
    <div className="flex items-center mb4">
        <div className="mr2">
            <UserAvatar imageUrl="https://www.placecage.com/640/480" isOnline size="xlarge" />
        </div>
        <div className="mr2">
            <UserAvatar imageUrl="https://www.placecage.com/640/480" isOnline size="large" />
        </div>
        <div className="mr2">
            <UserAvatar imageUrl="https://www.placecage.com/640/480" isOnline size="medium" />
        </div>
        <div className="mr2">
            <UserAvatar imageUrl="https://www.placecage.com/640/480" isOnline size="small" />
        </div>
        <div className="mr2">
            <UserAvatar imageUrl="https://www.placecage.com/640/480" isOnline size="xsmall" />
        </div>
    </div>

    <div className="flex items-center">
        <div className="mr2">
            <EntityAvatar imageUrl="https://www.placecage.com/640/480" isOnline size="xlarge" />
        </div>
        <div className="mr2">
            <EntityAvatar imageUrl="https://www.placecage.com/640/480" isOnline size="large" />
        </div>
        <div className="mr2">
            <EntityAvatar imageUrl="https://www.placecage.com/640/480" isOnline size="medium" />
        </div>
        <div className="mr2">
            <EntityAvatar imageUrl="https://www.placecage.com/640/480" isOnline size="small" />
        </div>
        <div className="mr2">
            <EntityAvatar imageUrl="https://www.placecage.com/640/480" isOnline size="xsmall" />
        </div>
    </div>
</div>

Checked

Deprecated

The checked badge is deprecated. To indicate hired status of a user, show this information separately next to the avatar. Only the online badge is supported by both components. Checked is only supported by UserAvatar.

<div className="flex items-center mb4">
    <div className="mr2">
        <UserAvatar imageUrl="https://www.placecage.com/640/480" isChecked size="xlarge" />
    </div>
    <div className="mr2">
        <UserAvatar imageUrl="https://www.placecage.com/640/480" isChecked size="large" />
    </div>
    <div className="mr2">
        <UserAvatar imageUrl="https://www.placecage.com/640/480" isChecked size="medium" />
    </div>
    <div className="mr2">
        <UserAvatar imageUrl="https://www.placecage.com/640/480" isChecked size="small" />
    </div>
    <div className="mr2">
        <UserAvatar imageUrl="https://www.placecage.com/640/480" isChecked size="xsmall" />
    </div>
</div>

Props

UserAvatar

  • imageUrl

    HTTPS URL that points a user’s avatar. The imageURL will take precendence over initials if both are supplied.

    Type
    string
    Default
    undefined
  • initials

    The user’s initials. This should be passed in as a two character string for best results.

    Type
    string
    Default
    undefined
  • fullName

    The user’s full name. This is used as title and alt text.

    Type
    string
    Default
    undefined
  • size

    The set of avatar sizes that we support.

    Type

    This prop can be one of the following 2 types:

    • oneOf([
        'xsmall',
        'small',
        'medium',
        'large',
        'xlarge',
      ])
    • number
    Default
    'small'
  • isChecked
    deprecated

    Displays a badge of a checkmark next to the Avatar.

    Type
    bool
    Default
    false
  • isOnline

    Displays a badge if the user is online.

    Type
    bool
    Default
    undefined

EntityAvatar

  • imageUrl

    HTTPS URL that points a user’s avatar. The imageURL will take precendence over initials if both are supplied.

    Type
    string
    Default
    undefined
  • initial

    The entity’s initial. This should be passed in as a one character string.

    Type
    string
    Default
    undefined
  • fullName

    The entity’s full name. This is used as title and alt text.

    Type
    string
    Default
    undefined
  • size

    The set of avatar sizes that we support.

    Type

    This prop can be one of the following 2 types:

    • oneOf([
        'xsmall',
        'small',
        'medium',
        'large',
        'xlarge',
      ])
    • number
    Default
    'small'
  • isOnline

    Displays a badge if the user is online.

    Type
    bool
    Default
    false