Avatar Component
Display user profile image, initials or fallback icon
Properties
| Name | Type | Default | Description |
|---|---|---|---|
label | string | '' | A label to use to describe the avatar to assistive devices. |
image | string | '' | The image source to use for the avatar. |
loading | 'eager' | 'lazy' | 'eager' | Indicates how the browser should load the image. |
size | 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'medium' | The size of the avatar. |
Slots
| Name | Description |
|---|---|
default | The default slot to use when image is not present. |
CSS Parts
| Name | Description |
|---|---|
avatar | The container that wraps the avatar component. |
placeholder | The container that wraps the avatar's placeholder. |
image | The avatar image. Only shown when the image is present. |
Check this link to learn how to use CSS parts for Avatar Component.
CSS Properties
| Token | Default | Description |
|---|---|---|
--tap-avatar-background-color | --tap-sys-color-surface-secondary | - |
--tap-avatar-border-color | --tap-sys-color-border-primary | - |
--tap-avatar-border-radius | --tap-sys-radius-full | - |
--tap-avatar-width-xxSmall | --tap-sys-spacing-8 | - |
--tap-avatar-height-xxSmall | --tap-sys-spacing-8 | - |
--tap-avatar-width-xSmall | --tap-sys-spacing-9 | - |
--tap-avatar-height-xSmall | --tap-sys-spacing-9 | - |
--tap-avatar-width-small | --tap-sys-spacing-10 | - |
--tap-avatar-height-small | --tap-sys-spacing-10 | - |
--tap-avatar-width-medium | --tap-sys-spacing-11 | - |
--tap-avatar-height-medium | --tap-sys-spacing-11 | - |
--tap-avatar-width-large | 56px | - |
--tap-avatar-height-large | 56px | - |
--tap-avatar-width-xLarge | 72px | - |
--tap-avatar-height-xLarge | 72px | - |