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

Props

EuiAvatar

Extends HTMLAttributes


Prop	Description and type	Default value
Prop name#	Description and type Full name of avatar for title attribute and calculating initial if not provided Type: `string`	Default value Required
Prop className#	Description and type Type: `string`	Default value
Prop aria-label#	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: `string`	Default value
Prop data-test-subj#	Description and type Type: `string`	Default value
Prop css#	Description and type Type: `Interpolation<Theme>`	Default value
Prop initials#	Description and type Custom initials (max 2 characters). By default will take the first character (of each word). Type: `string`	Default value
Prop initialsLength#	Description and type Specify how many characters to show (1 or 2). By default, will show based on number of words (max first 2). Type: `2 \| 1`	Default value
Prop imageUrl#	Description and type Path to an image to display instead of initials Type: `string`	Default value
Prop iconType#	Description and type Any EUI glyph, logo or custom icon to display instead of initials Type: `IconType`	Default value
Prop iconSize#	Description and type Manually change icon size Type: `"s" \| "m" \| "l" \| "xl" \| "xxl" \| "original"`	Default value
Prop iconColor#	Description and type Manually change icon color Type: `string`	Default value
Prop color#	Description and type Accepts hex values like `#FFFFFF`, `#000` otherwise a viz palette color will be assigned. Or pass `'plain'` for an empty shade, `'subdued'` for a light gray shade or `null` to remove entirely and the text/icon color will `inherit` Type: `string`	Default value
Prop type#	Description and type The type of avatar mainly controlling the shape. `user` = circle `space` = rounded square Type: `"space" \| "user"`	Default value `user`
Prop size#	Description and type Type: `"s" \| "m" \| "l" \| "xl"`	Default value `m`
Prop casing#	Description and type Sets the letter casing of the displayed initials. Defaults to `uppercase` for `type="user"` avatars. Defaults to `none` (uses the existing casing of the passed `name` or `initials`) for `type="space"` avatars. Type: `"none" \| "capitalize" \| "lowercase" \| "uppercase"`	Default value `uppercase`
Prop isDisabled#	Description and type Grays out the avatar to simulate being disabled Type: `boolean`	Default value `false`