Avatar
NB! The component will be deprecated soon.
Please check out our new Avatar component.
Default
Variants
JS
Rounded
JS
Different colours
Sizes
xs
sm
md
lg
xl
2xl
Active status
Status origin
Avatar props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| bg_color | string | No | bg-goku | Background color |
| color | string | No | text-bulma | Text color |
| image_url | string | No | - | Path to the image |
| is_rounded | boolean | No | false | |
| is_status_active | boolean | No | false | Active state for status indication |
| name | string | No | - | Capital letters of name |
| size | xs | sm | md | lg | xl | 2xl | No | md | Size for avatar |
| status_origin | %StatusOrigin{ vertical: top | bottom, horizontal: left | right } | No | %StatusOrigin{vertical: "bottom", horizontal: "right"} | Position for status indication |