Skip to content

SiAvatarComponent documentation

selector
si-avatar

Input Properties

Name Type Default Description
altText
Required		 string The alt text for image, title for other modes.
autoColor
 boolean false Automatically calculates the background color. If set, color will be ignored.
color
 number undefined The desired color index from $element-data-* color tokens. This can be set to any kind of positive integer that is then mapped to a color index. A better way to set a pseudo-random color is to set * autoColor to true .
icon
 string Icon name when using an icon.
imageUrl
 string Image src URL when using an image.
initials
 string Initials to be displayed as default avatar if no icon or imageUrl are provided. If also no initials are provided, they will be automatically calculated from the altText . The value will be used to calculate the background color when autoColor is true.
size
 AvatarSize 'regular' Size of the component.
status
 EntityStatusType The status (success, info, warning, caution, danger, critical, pending, progress) to be visualized.
statusAriaLabel
 TranslatableString aria-label for status

Types Documentation

("tiny" | "xsmall" | "small" | "regular" | "large" | "xlarge")
(ExtendedStatusType | "pending" | "progress")
(string & Translatable)
Represents a translatable string. This can either be a translation key, e.g. ACTIONS.EDIT that will be automatically translated when displayed on the UI or a pre-translated string, e.g. Edit . Equivalent to a normal string in usage and functionality.
(StatusType | "unknown")
("success" | "info" | "warning" | "danger" | "caution" | "critical")
InputSignalWithTransform<(number | undefined), unknown> = undefined
Property
▶
The desired color index from $si-sys-color-data-categorical-* color tokens. This can be set to any kind of positive integer that is then mapped to a color index. A better way to set a pseudo-random color is to set autoColor to true .

Except where otherwise noted, content on this site is licensed under MIT License.