Avatars are used to show a thumbnail representation of an individual or business in the interface.
Avatars are used to represent people such as employees and users.
The color of an avatar is automatically generated from the name provided.
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.
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.
EntityAvatar to identify legal entities like companies.
The entity avatar is very much like the user avatar with a few key differences:
- They are square in shape
Entities may be of two different types. The defining characteristic is the initials character limit.
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.
Providing a name will render the first letter and automatically select a colour from the theme.
The icon property will accept any icon from the icon package.
Unlike the other avatar variants, the instance component will accept an explicit color property.
The instance component only supports three sizes.