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

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
Last updated