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
Prop | Description and type | Default value |
|---|---|---|
Prop name# | Description and type Full name of avatar for title attribute and calculating initial if not provided 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. 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). string | Default value |
Prop initialsLength# | Description and type Specify how many characters to show (1 or 2). 2 | 1 | Default value |
Prop imageUrl# | Description and type Path to an image to display instead of initials string | Default value |
Prop iconType# | Description and type Any EUI glyph, logo or custom icon to display instead of initials IconType | Default value |
Prop iconSize# | Description and type Manually change icon size "s" | "m" | "l" | "xl" | "xxl" | "original" | Default value |
Prop iconColor# | Description and type Manually change icon color string | Default value |
Prop color# | Description and type Accepts hex values like string | Default value |
Prop type# | Description and type The type of avatar mainly controlling the shape. "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. "none" | "capitalize" | "lowercase" | "uppercase" | Default value uppercase |
Prop isDisabled# | Description and type Grays out the avatar to simulate being disabled boolean | Default value false |