Avatar
The Avatar
component 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.
With image
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).