Docplanner Logo

Docplanner Mobile UI

Edit page
Introduction
⚙️ – Core
⚛️ – Atoms-Molecules
AvatarPropertiesBasic usageBadgeButtonCheckBoxFieldCircleDividerDownloadCardIconInputFieldInputFieldButtonLinkListItemOneTimeCodeInputPhotoAvatarRadioGroupFieldRatingSelectFieldSimpleAvatarSpacerSwitchFieldTextToast❌ Icon (Deprecated)❌ Roboto (Deprecated)❌ WorkSans (Deprecated)
🧬 – Organisms

Avatar

This component render an avatar from a user, doctor or a patient. This is component is using PhotoAvatar and SimpleAvatar.

See more info about the component:

  • PhotoAvatar
  • SimpleAvatar

Properties

size
"xs" | "sm" | "md" | "lg" | undefined

Avatar size. It will define both Image and Badge size Avatar size

hasOnlineBadge
boolean | undefined

Determines if the avatar will come with the online badge

isOnline
boolean | undefined

If case of Avatar with badge, this will determine the state of the badge

uri
string | undefined

Image URI

text
string
required

Text that will be shown inside the avatar

color
"gray" | "blue" | "turquoise" | "purple" | "red" | "yellow" | "green" | "primary" | undefined

🎨   Color variant

Basic usage

PJ
GL
BA