Avatar
In progress
RTL
The Avatar component is typically used to display images, icons, or initials representing people or other entities.
Anatomy
<Avatar> <Avatar.Status /> </Avatar>
Default
Variants
md
Sizes
xs
sm
md
lg
xl
2xl
Active status
md
Status origin
Customization
Avatar props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| id | string | No | - | Id of the component |
| testid | string | No | - | Data-testid attribute for DOM element |
| class | css_class | No | - | Tailwind classes for customization |
| name | string | No | - | Capital letters of name |
| size | xs | sm | md | lg | xl | 2xl | No | "md" | Size of avatar |
| image_url | string | No | - | Path to the image |
| default | slot | No | - | Content of Avatar - use it to show icons or anything else |
| status | slot | No | - | Status indicator of Avatar, see Avatar.Status |
Avatar.Status props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| id | string | No | - | Id of the component |
| position | map | No | - | Position for status indicator. Vertical options: bottom | top. Horizontal options: left | right. Default is bottom-right |
| size | string | No | - | Will be got from Avatar in most cases |
| class | css_class | No | - | Tailwind classes for customization |
| testid | string | No | - | Data-testid attribute for DOM element |