Components

Avatar(React)

Display user images and badges on Thumbtack.

Version:10.1.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.

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.

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.

AA
BA
CA
DA
EA
HA
A
B
C
D
E
F

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.

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.

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.

    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