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).

Single vs multi-word

Custom & Spaces type