Avatar
The Avatar component is used to represent a user or a entity. It displays a picture or a fallback to initials.
View source code- text
string
The text to display whether src is not provided or src is not valid. The text will be truncated to one character. Random colors, based on the truncated text, will be assign automatically as background and text color.
- badgeProps
AvatarBadgeProps
Whether the Avatar should contains a badge
- className
string
className for the element
- fallbackSrc
string
The fallback source to display when src is not provided or src is not valid. If defined, the Avatar component will not fallback on text initials.
- iconName
"adjustments-horizontal" | "archive" | "arrow-down-tray" | "arrow-down" | "arrow-left-right" | "arrow-left" | "arrow-path" | "arrow-right-rectangle" | "arrow-right" | "arrow-split" | "arrow-top-right-square" | "arrow-turn-right" | "arrow-up-tray" | "arrow-up" | "arrow-uturn-left-down" | "arrow-uturn-right-top" | ... 140 more ...
The name of the icon to display
- lazyLoad
boolean
Whether the Avatar src should be lazy loaded
Default: false - size
16 | 24 | 32 | 40 | 56
Specifies the size of the element.
Default: 32 - src
string
The image URL
- variant
"circle" | "square"
Whether the Avatar should be square or circle
Default: circle