Github

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

PreviousChangelogNextButton

Last updated