Docplanner Logo

Docplanner Mobile UI

Edit page
Introduction
⚙️ – Core
⚛️ – Atoms-Molecules
AvatarBadgeButtonCheckBoxFieldCircleDividerDownloadCardIconInputFieldInputFieldButtonLinkListItemOneTimeCodeInputPhotoAvatarPropertiesBasic usageWith Image SourceVariationsRadioGroupFieldRatingSelectFieldSimpleAvatarSpacerSwitchFieldTextToast❌ Icon (Deprecated)❌ Roboto (Deprecated)❌ WorkSans (Deprecated)
🧬 – Organisms

PhotoAvatar

Component to show user's pictures, it includes an online badge.

Properties

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

Avatar size. It will define both Image and Badge 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

Basic usage

With Image Source

Variations