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
xsmallwill 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, though it's a rounded-square shape to distinguish it.
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.
Stack a group of related user avatars on top of one another.
size provided to the avatar stack will influence the avatars, overflow text, and the gap between each avatar.
You may choose to hide the overflow text.