Avatar

NB! The component will be deprecated soon.

Please check out a new Avatar built with Tailwind.

Variants

JS

Different colours

Different sizes

JS
JS
JS
JS
JS
JS

Active status

Status Origin

Props

NameTypeRequiredDefaultDescription
sizexsmall | small | medium | large | xlarge | twoxlargeNomediumSize for avatar
namestring | JSX.ElementNo-Capital letters of name
imageUrlstringNo-Path to the image
statusOriginStatusOriginNobottom, rightPosition for status indication
isStatusActivebooleanNofalseActive state for status indication
colorColorPropsNobulma.100Text color
backgroundColorColorPropsNogohan.100Background color