Avatar

The avatar component is used to display user avatars and special forms of icons

Preview

The component can:

• Display a user image or fallback based on given username string

• Display icons in colored circle or rectangle

• Display an additional border state success, warning, error, info

Variation of possible looks and use cases

Code sample

import { Avatar } from '@dormakaba/digital-reactnative-visual';

// user avatar
<Avatar
  src="https://avatars2.githubusercontent.com/u/977772"
  name="Jan Mühlemann"
  circle
/>

// icon with state
<Avatar
  lightGray
  circle
  border="info"
/>

Props

Name	Type	Description
icon	string	Icon name to display
src	string	Url to load image from
header	object	Optional header for the image load request
name	string	Used to generate possible fallback value and color if no src is defined or was unable to load it
circle	boolean	true if you prefer displaying a circle
*	boolean	set any of following props as size options: xlarge, large, small, xsmall (default: medium)
width	int	custom size
*	boolean	set background color by setting any of this props: error, warning, success, info, white, darkGray, lightGray, labelGray, borderGray, label (default textGray)
border	string	any color of: success, warning, error, info