Docplanner Mobile UI

Edit page

Introduction

⚙️ – Core

🧬 – Organisms

Simple Avatar

Simple Avatar to use when picture is not available.

Properties

size

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

Avatar size

text

string

required

Text that will be shown inside the avatar

color

gray

🎨 Color variant

Basic usage

<SimpleAvatar size="lg" text="AA" color="red" />

<SimpleAvatar size="lg" text="AA" color="red" />

Variations

<View>
  <Row>
    <SimpleAvatar size="lg" text="AR" color="yellow" />
    <SimpleAvatar size="lg" text="MS" color="turquoise" />
  </Row>
  <DpSpacer />
  <Row>
    <SimpleAvatar size="md" text="AR" color="blue" />
    <SimpleAvatar size="md" text="MS" color="purple" />
  </Row>
</View>

<View>
  <Row>
    <SimpleAvatar size="lg" text="AR" color="yellow" />
    <SimpleAvatar size="lg" text="MS" color="turquoise" />
  </Row>
  <DpSpacer />
  <Row>
    <SimpleAvatar size="md" text="AR" color="blue" />
    <SimpleAvatar size="md" text="MS" color="purple" />
  </Row>
</View>

Docplanner Mobile UI

Simple Avatar

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Properties

Basic usage

Variations

Properties