Components

Avatar(React)

Display user images and badges on Thumbtack.

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

Avatar Sizes

Extra Large

<Avatar imageUrl="https://www.placecage.com/640/480" size="xlarge" />

Large

<Avatar imageUrl="https://www.placecage.com/640/480" size="large" />

Medium

<Avatar imageUrl="https://www.placecage.com/640/480" size="medium" />

Small

<Avatar imageUrl="https://www.placecage.com/640/480" size="small" />

Extra Small

<Avatar imageUrl="https://www.placecage.com/640/480" size="xsmall" />

Avatars without images

When a user does not have an image, an Avatar can display the user’s initials instead.

JK
<Avatar initials="JK" />

EntityAvatar

Extra Large

<EntityAvatar imageUrl="https://www.placecage.com/640/480" size="xlarge" />

Large

<EntityAvatar imageUrl="https://www.placecage.com/640/480" size="large" />

Medium

<EntityAvatar imageUrl="https://www.placecage.com/640/480" size="medium" />

Small

<EntityAvatar imageUrl="https://www.placecage.com/640/480" size="small" />

Initial

J
<EntityAvatar initial="J" size="medium" />

Avatar Badges

Badges can be added to avatars to denote information including hired status and unread notifications. These badges cannot be used on the xsmall variation.

Checked

<Avatar imageUrl="https://www.placecage.com/640/480" isChecked size="xlarge" />

Notification

<Avatar imageUrl="https://www.placecage.com/640/480" hasUnreadNotifications size="xlarge" />

Online

<Avatar imageUrl="https://www.placecage.com/640/480" isOnline size="medium" />

Props

Avatar

  • 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
    oneOf([
      'xsmall',
      'small',
      'medium',
      'large',
      'xlarge',
    ]);
    Default
    'medium'
  • isChecked

    Displays a badge of a checkmark next to the Avatar.

    Type
    bool
    Default
    false
  • hasUnreadNotifications

    Should be true if the user has unread notifications. Displays a badge as an indication.

    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 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
    oneOf([
      'small',
      'medium',
      'large',
      'xlarge',
    ]);
    Default
    'medium'