Docplanner Mobile UI

Edit page

Introduction

⚙️ – Core

🧬 – Organisms

Circle

A simple component to represent any kind of steps or categories

Properties

children

ReactNode

required

Children

size

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

Circle size

color

gray

🎨 Color variant

emphasis

"high" | "low" | undefined

high

🎨 Color variant emphasis

Basic usage



<DpCircle>
  <DpIcon name={DpIcons.LogosDocplanner} color={palette.white} />
</DpCircle>

<DpCircle>
  <DpIcon name={DpIcons.LogosDocplanner} color={palette.white} />
</DpCircle>

Sizes

<Row>
  <DpCircle size="sm">A</DpCircle>
  <DpCircle size="md">A</DpCircle>
  <DpCircle size="lg">A</DpCircle>
</Row>

<Row>
  <DpCircle size="sm">A</DpCircle>
  <DpCircle size="md">A</DpCircle>
  <DpCircle size="lg">A</DpCircle>
</Row>

Variations



<View>
  <Row>
    <DpCircle color="gray" emphasis="high">
      <DpIcon name={DpIcons.LogosDocplanner} color={palette.white} />
    </DpCircle>
    <DpCircle color="blue" emphasis="high">
      <DpIcon name={DpIcons.LogosDocplanner} color={palette.white} />
    </DpCircle>
    <DpCircle color="turquoise" emphasis="high">
      <DpIcon name={DpIcons.LogosDocplanner} color={palette.white} />
    </DpCircle>
    <DpCircle color="yellow" emphasis="high">
      <DpIcon name={DpIcons.LogosDocplanner} color={palette.white} />
    </DpCircle>
    <DpCircle color="red" emphasis="high">
      <DpIcon name={DpIcons.LogosDocplanner} color={palette.white} />
    </DpCircle>
    <DpCircle color="purple" emphasis="high">
      <DpIcon name={DpIcons.LogosDocplanner} color={palette.white} />
    </DpCircle>
  </Row>
  <DpSpacer />
  <Row>
    <DpCircle color="gray" emphasis="low">
      <DpIcon name={DpIcons.LogosDocplanner} />
    </DpCircle>
    <DpCircle color="blue" emphasis="low">
      <DpIcon name={DpIcons.LogosDocplanner} color={palette.blue} />
    </DpCircle>
    <DpCircle color="turquoise" emphasis="low">
      <DpIcon name={DpIcons.LogosDocplanner} color={palette.turquoise} />
    </DpCircle>
    <DpCircle color="yellow" emphasis="low">
      <DpIcon name={DpIcons.LogosDocplanner} color={palette.yellow} />
    </DpCircle>
    <DpCircle color="red" emphasis="low">
      <DpIcon name={DpIcons.LogosDocplanner} color={palette.red} />
    </DpCircle>
    <DpCircle color="purple" emphasis="low">
      <DpIcon name={DpIcons.LogosDocplanner} color={palette.purple} />
    </DpCircle>
  </Row>
</View>