Avatar

An Avatar is a graphical representation of a user or entity and an Avatar Group is a collection of Avatars. Use the user variant to represent people and use the entity variant to represent non-user objects, such as businesses.

Avatar can display initials, an image, or an icon. If both an image and an icon are passed to Avatar, the image will be displayed. Initials will be displayed if no image and no icon are provided. The initials displayed are derived from the string passed to the name prop.

Avatar sizing works similarly to Paste Icon sizing. Pass any of the icon size tokens (sizeIcon10, sizeIcon20, sizeIcon30, etc.) to Avatar’s size prop.

Note: using sizes 10 and 20 isn’t recommended for displaying initials within an Avatar, as these small sizes may cut off certain wide characters, such as “W”.

The name prop is required on all instances of the Avatar component. This ensures that whether your Avatar is displaying initials, an image, or an icon, the user will be able to access information about what object is being represented by the Avatar. The full string passed to name appears as a title upon hovering the Avatar, and is useful to assistive technology users.

Avatar has two variants, one for users and one for entities such as a business. The default value for variant is "user".

If the Avatar is passed a name prop but no src or icon props, it will render initials as the visual representation of the user or entity. This option is particularly useful if there is no image to use.

Provide the Avatar with a source path via the src prop to render the Avatar as an image. The src prop acts just like an img tag. You must still provide a name prop.

Provide the Avatar with an icon prop to display an icon. You must import the icon before passing it to the icon prop. You must still provide a name prop. The icon must be a Paste Icon.

The Avatar color prop can be used to change the color. These colors are meant to differentiate between multiple Avatars in close proximity to each other. Do not use these colors to convey meaning, like warning, error, or success. Pass any of the following values as Avatar colors.

The Avatar size can be set as a responsive array of sizes.

Use Avatar Group to display multiple Avatars stacked together. Pass the size prop to control the sizes and spacing of the Avatars within the group. Pass the variant prop to determine whether the Avatars within the group are “user” or “entity” variants, as the two variants have different spacing.

Avatar Group doesn’t have an overflow state built into the API. If your group contains more than 3 Avatars, using the following pattern is recommended. Use either a Link-style Button or bolded text to display the overflow number.

The following tokens are used with each size of Avatar.