Thumbprint logo

Components

Avatar

Display user images and badges on Thumbtack.

Version:14.18.2 •View source•Changelog•Report 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://i.pravatar.cc/140" size="xlarge" />

    </div>

    <div>

        <UserAvatar imageUrl="https://i.pravatar.cc/140" 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://i.pravatar.cc/140" size="xlarge" />

        </div>

        <div className="mr3">

            <UserAvatar imageUrl="https://i.pravatar.cc/140" size="large" />

        </div>

        <div className="mr3">

            <UserAvatar imageUrl="https://i.pravatar.cc/140" size="medium" />

        </div>

        <div className="mr3">

            <UserAvatar imageUrl="https://i.pravatar.cc/140" size="small" />

        </div>

        <div className="mr3">

            <UserAvatar imageUrl="https://i.pravatar.cc/140" size="xsmall" />

        </div>

    </div>

    <div className="flex items-center">

        <div className="mr3">

            <EntityAvatar imageUrl="https://i.pravatar.cc/140" size="xlarge" />

        </div>

        <div className="mr3">

            <EntityAvatar imageUrl="https://i.pravatar.cc/140" size="large" />

        </div>

        <div className="mr3">

            <EntityAvatar imageUrl="https://i.pravatar.cc/140" size="medium" />

        </div>

        <div className="mr3">

            <EntityAvatar imageUrl="https://i.pravatar.cc/140" size="small" />

        </div>

        <div className="mr3">

            <EntityAvatar imageUrl="https://i.pravatar.cc/140" size="xsmall" />

        </div>

    </div>

</>



Avatars without images


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


<>

    <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://i.pravatar.cc/140" isOnline size="xlarge" />

        </div>

        <div className="mr2">

            <UserAvatar imageUrl="https://i.pravatar.cc/140" isOnline size="large" />

        </div>

        <div className="mr2">

            <UserAvatar imageUrl="https://i.pravatar.cc/140" isOnline size="medium" />

        </div>

        <div className="mr2">

            <UserAvatar imageUrl="https://i.pravatar.cc/140" isOnline size="small" />

        </div>

        <div className="mr2">

            <UserAvatar imageUrl="https://i.pravatar.cc/140" isOnline size="xsmall" />

        </div>

    </div>



    <div className="flex items-center">

        <div className="mr2">

            <EntityAvatar imageUrl="https://i.pravatar.cc/140" isOnline size="xlarge" />

        </div>

        <div className="mr2">

            <EntityAvatar imageUrl="https://i.pravatar.cc/140" isOnline size="large" />

        </div>

        <div className="mr2">

            <EntityAvatar imageUrl="https://i.pravatar.cc/140" isOnline size="medium" />

        </div>

        <div className="mr2">

            <EntityAvatar imageUrl="https://i.pravatar.cc/140" isOnline size="small" />

        </div>

        <div className="mr2">

            <EntityAvatar imageUrl="https://i.pravatar.cc/140" 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://i.pravatar.cc/140" isChecked size="xlarge" />

    </div>

    <div className="mr2">

        <UserAvatar imageUrl="https://i.pravatar.cc/140" isChecked size="large" />

    </div>

    <div className="mr2">

        <UserAvatar imageUrl="https://i.pravatar.cc/140" isChecked size="medium" />

    </div>

    <div className="mr2">

        <UserAvatar imageUrl="https://i.pravatar.cc/140" isChecked size="small" />

    </div>

    <div className="mr2">

        <UserAvatar imageUrl="https://i.pravatar.cc/140" 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
  • initials
    The user's initials. This should be passed in as a two character string
for best results.
    Type
    string
  • fullName
    The user's full name. This is used as `title` and `alt` text.
    Type
    string
  • size
    The set of avatar sizes that we support.
    Type
    This prop can be one of the following 6 types:
    • 'xsmall'
    • 'small'
    • 'medium'
    • 'large'
    • 'xlarge'
    • number
  • isChecked
    deprecated
    Displays a badge of a checkmark next to the `Avatar`.
    Note: Indicate this information outside of the avatar instead.
    Type
    boolean
  • isOnline
    Displays a badge if the user is online.
    Type
    boolean
EntityAvatar
  • imageUrl
    HTTPS URL that points a user's avatar. The `imageURL` will take
precendence over `initials` if both are supplied.
    Type
    string
  • initial
    The entity's initial. This should be passed in as a one character string.
    Type
    string
  • fullName
    The entity's full name. This is used as `title` and `alt` text.
    Type
    string
  • size
    The set of avatar sizes that we support.
    Type
    This prop can be one of the following 6 types:
    • 'xsmall'
    • 'small'
    • 'medium'
    • 'large'
    • 'xlarge'
    • number
  • isOnline
    Displays a badge if the user is online.
    Type
    boolean