UikAvatar

PropertyTypeRequiredDefault ValueDescription
classNameStringfalsenullclassName, e.g. "my-custom-styling"
ComponentReact.ElementTypefalse"div"Renders the component with a given react element. By default, the component renders <div />. This is usefull when you want to use a same style but render a different HTML element or your custom component. Read and see more examples here.
nameReact.NodefalsenullReact node, same as children
statusReact.NodefalsenullReact node, same as children
imgUrlString | Array<String>falsenullImage url. You can provide up to 4 images to be displayed. See example
avatarPlaceholderObjectfalsenull

{ color: "red", content: "AJ" }, you can use for e.g. placeholders using initials. See more color options.

highlightedBooleanfalsefalseJust makes the name bold
textTopReact.NodefalsenullText above the name
textBottomReact.NodefalsenullText under the name
actionIconReact.NodefalsenullBottom element next to avatar, e.g. icon showing an action.
sizeStringfalsenull

Default size is 38px.
"small" (28px), "large" (60px), "larger" (80px), "extraLarge" (100px), "jumbo" (120px)

...restanyfalseOther properties are passed to the wrapping element.

UikAvatar Examples

ComponentExample Code
<UikAvatar imgUrl={ images.a01 } />
John Snow
<UikAvatar
  imgUrl={ images.a01 }
  name="John Snow"
/>
John Snow
<UikAvatar
  highlighted
  imgUrl={ images.a01 }
  name="John Snow"
/>
Created by
Natasha Special
<UikAvatar
  highlighted
  imgUrl={ images.a21 }
  name="Natasha Special"
  textTop="Created by"
/>
Natasha Special
HR Specialist
<UikAvatar
  highlighted
  imgUrl={ images.a21 }
  name="Natasha Special"
  textBottom="HR Specialist"
/>
AF
Anna Frank
<UikAvatar
  avatarPlaceholder={ {
    content: 'AF',
    color: 'violet',
  } }
  name="Anna Frank"
/>
Group conversation name
<UikAvatar
  imgUrl={ [
    images.a01,
    images.a05,
  ] }
  name="Group Chat"
/>
John Snow
<UikAvatar
  imgUrl={ images.a01 }
  name="John Snow"
  size="small"
/>
John Snow
<UikAvatar
  imgUrl={ images.a01 }
  name="John Snow"
  size="large"
/>
John Snow
<UikAvatar
  imgUrl={ images.a01 }
  name="John Snow"
  size="larger"
/>
John Snow
<UikAvatar
  imgUrl={ images.a01 }
  name="John Snow"
  size="extraLarge"
/>
John Snow
<UikAvatar
  imgUrl={ images.a01 }
  name="John Snow"
  size="jumbo"
/>
like
John Snow
<UikAvatar
  actionIcon={ (
    <img
      alt="like"
      src={ images.ua02 }
    />
  ) }
  imgUrl={ images.a13 }
  name="John Snow"
/>