Balance Logo
Balance
Reckon Design System

Avatar

User avatars help to quickly identify people in the system, like users and employees. Entity avatars identify non-person entities, like companies.
Install
pnpm add @reckon-web/avatar
Import usage
import {
UserAvatar,
EntityAvatar,
Instance
} from '@reckon-web/avatar';
  • Code
  • API

Avatars are used to show a thumbnail representation of an individual or business in the interface.

User Avatar

Avatars are used to represent people such as employees and users.

TW
Open in Playroom

Color

The color of an avatar is automatically generated from the name provided.

SW
BL
PP
DC
LB

Disabled

Though not an interactive element, an avatar can be disabled. This may mean, for instance, an employee's details are incomplete; indicating that they're not eligible to be included in a pay run.

D

Size

Use the size property to set the width and height of an avatar. The initials will size automatically. Note that the size xsmall will only display a single character for the initials.

X
SM
MD
LG
XL

Entity Avatar

Use the EntityAvatar to identify legal entities like companies.

Usage

The entity avatar is very much like the user avatar with a few key differences:

  • They are square in shape
R

Type

Entities may be of two different types. The defining characteristic is the initials character limit.

R
TW

Instance Avatar

Use the instance avatar to identify things, or groups of things, that are neither people nor legal entities. You might use an instance to highlight a payrun item or even a group of entities under a single icon.

Name

Providing a name will render the first letter and automatically select a colour from the theme.

E

Icon

The icon property will accept any icon from the icon package.

Color

Unlike the other avatar variants, the instance component will accept an explicit color property.

Size

The instance component only supports three sizes.

Copyright © 2021 Reckon. Designed and developed in partnership with Thinkmill.