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