Avatar
Avatars are used to show a thumbnail representation of an individual or business in the interface.
import { AvatarStack, UserAvatar, EntityAvatar, Instance } from '@balance-web/avatar';User Avatar
Color
The color of an avatar is automatically generated from the name provided.
Guest
Use the guest prop to indicate an avatar is less significant, for example a guest user.
Inactive
Note: This was previously the
disabledprop which has been deprecated.
Use inactive prop to indicate that an avatar is somehow unavailable, for example an employee's details are incomplete; indicating that they're not eligible to be included in a pay run.
Size
Use the size property to set the width and height of an avatar. The initials will size automatically.
NOTE: that the size
xsmallwill only display a single character for the initials.
If none of the sizing tokens fit, size also accepts a CustomSizeType —
an explicit { width, height, fontSize, borderRadius? } object — for the
rare case a design calls for dimensions the scale has no token for.
Entity Avatar
Usage
Type
Entities may be of two different types. The defining characteristic is the initials character limit.
Instance Avatar
Name
Providing a name will render the first letter and automatically select a colour from the theme.
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.
Avatar Stack
Usage
Size
The size provided to the avatar stack will influence the avatars, overflow text, and the gap between each avatar.
Overflow text
You may choose to hide the overflow text.