Avatar
Display user profile image, initials or fallback icon
- Import
import "@tapsioss/web-components/avatar";
- Tag
<tapsi-avatar></tapsi-avatar>
Properties
| Name | Description | Type | Default Value |
|---|---|---|---|
label | A label to use to describe the avatar to assistive devices. | string | - |
alt | The alternative text description of the avatar image, used for accessibility. | string | - |
image | The image source to use for the avatar. | string | - |
loading | Indicates how the browser should load the image. | "eager" | "lazy" | "eager" |
size | The size of the avatar. | "xs" | "sm" | "md" | "lg" | "xlg" | "xxlg" | "md" |
Slots
| Name | Description |
|---|---|
| - | The default slot to use when image is not present. |
TIP
You can use slot names as variables:
ts
import { Slots } from "@tapsioss/web-components/avatar";
console.log(Slots.DEFAULT); // ""