Avatar
In progress
RTL
The Avatar component is typically used to display images, icons, or initials representing people or other entities.
Default
Variants
md
Rounded
md
Custom colours
Sizes
xs
sm
md
lg
xl
2xl
Active status
md
Status origin
Avatar props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| bgColor | string | No | bg-gohan | Background colour |
| color | string | No | text-bulma | Text colour |
| imageUrl | string | No | - | Path to the image |
| isRounded | boolean | No | false | Rounded border radius |
| isStatusActive | boolean | No | false | Active state of status indicator |
| name | string | JSX.Element | No | - | Capital letters of name |
| size | xs | sm | md | lg | xl | 2xl | No | md | Size of avatar |
| statusOrigin | { vertical: 'top' | 'bottom', horizontal: 'left' | 'right' } | No | { vertical: 'bottom', horizontal: 'right' } | Position for status indicator |