Avatar
The EuiAvatar component typically creates a user icon.
It will accept name (required) and image props and will configure the display and accessibility as needed.
By default, the background colors come from the set of colors used for visualizations.
Otherwise, you can pass a hex value to the color prop.
Initials
The initials displayed in the avatar try to be smart based on the name prop.
If the name contains spaces, it will display the first character of each word, always maxing out at 2 characters.
You can customize this by passing a combination of initialsLength and/or initials props.
However, the avatar will still always max out at 2 characters.
Types
The avatar type, which primarily defines the shape, is keyworded and can be "user" (default)
or "space" (for workspaces).
Icons
Icons can also be displayed instead of initials or images. When simply passing an iconType,
it will both size and color appropriately based on the other EuiAvatar props.
To customize these specifically, pass iconSize and iconColor.
If your icon has multiples or custom colors like a logo, you can keep the default iconColor by passing null.
Otherwise, it will get the appropriate contrast acceptable variant.
Just ensure that you also are providing an accessible background color to match that of the icon's color.
Disabled
While EuiAvatar doesn't accept any interactive behaviors itself, you can create a visually presented disabled
avatar by adding isDisabled when placed within a disabled element.