Docplanner Mobile UI

⚙️ – Core

🧬 – Organisms

Button

Buttons make common actions immediately visible and easy to perform with one click or tap. They can be used for any type of action, including navigation.

The "primary" button should be used to identify the main call to action in a screen. Ideally, you want to have only one instance of it per screen. You can as many of the other button types per screen as you want.

Properties

variant

"primary" | "danger" | "secondary" | undefined

primary

🎨 The variant of the button to render.

emphasis

"low" | "medium" | undefined

medium

🎨 The emphasis of the variant

isCompact

boolean | undefined

@deprecated , please use @size instead Whether to render the button smaller or not.

size

ButtonSize | undefined

ButtonSize.Md

Available size options

isLoading

boolean | undefined

Loading flag

iconRight

Icon name or a custom react element

iconLeft

Icon name or a custom react element

children

string | undefined

Children

Basic usage

Button

<View style={rowWrapper}>
  <DpButton>Button</DpButton>
</View>

<View style={rowWrapper}>
  <DpButton>Button</DpButton>
</View>

Sizing



Large



Medium (default)



Small

<View style={rowWrapper}>
  <DpButton
    iconLeft={DpIcons.ActionSearch}
    variant="primary"
    size={ButtonSize.Lg}
  >
    Large
  </DpButton>
  <DpSpacer isHorizontal />
  <DpButton iconLeft={DpIcons.ActionSearch} variant="primary">
    {' '}
    Medium (default)
  </DpButton>
  <DpSpacer isHorizontal />
  <DpButton
    iconLeft={DpIcons.ActionSearch}
    variant="primary"
    size={ButtonSize.Sm}
  >
    Small
  </DpButton>
</View>

<View style={rowWrapper}>
  <DpButton
    iconLeft={DpIcons.ActionSearch}
    variant="primary"
    size={ButtonSize.Lg}
  >
    Large
  </DpButton>
  <DpSpacer isHorizontal />
  <DpButton iconLeft={DpIcons.ActionSearch} variant="primary">
    {' '}
    Medium (default)
  </DpButton>
  <DpSpacer isHorizontal />
  <DpButton
    iconLeft={DpIcons.ActionSearch}
    variant="primary"
    size={ButtonSize.Sm}
  >
    Small
  </DpButton>
</View>

Variations and emphases

Primary medium

Primary low

Secondary medium

Secondary low

Danger medium

Danger low

<View style={rowWrapper}>
  <DpSpacer />
  <DpButton variant="primary" emphasis="medium">
    Primary medium
  </DpButton>
  <DpSpacer />
  <DpButton variant="primary" emphasis="low">
    Primary low
  </DpButton>
  <DpSpacer />
  <DpButton variant="secondary" emphasis="medium">
    Secondary medium
  </DpButton>
  <DpSpacer />
  <DpButton variant="secondary" emphasis="low">
    Secondary low
  </DpButton>
  <DpSpacer />
  <DpButton variant="danger" emphasis="medium">
    Danger medium
  </DpButton>
  <DpSpacer />
  <DpButton variant="danger" emphasis="low">
    Danger low
  </DpButton>
</View>

<View style={rowWrapper}>
  <DpSpacer />
  <DpButton variant="primary" emphasis="medium">
    Primary medium
  </DpButton>
  <DpSpacer />
  <DpButton variant="primary" emphasis="low">
    Primary low
  </DpButton>
  <DpSpacer />
  <DpButton variant="secondary" emphasis="medium">
    Secondary medium
  </DpButton>
  <DpSpacer />
  <DpButton variant="secondary" emphasis="low">
    Secondary low
  </DpButton>
  <DpSpacer />
  <DpButton variant="danger" emphasis="medium">
    Danger medium
  </DpButton>
  <DpSpacer />
  <DpButton variant="danger" emphasis="low">
    Danger low
  </DpButton>
</View>

Loading state

<View style={C.itemsStart}>
  <DpButton variant="primary" isLoading>
    Loading
  </DpButton>
  <DpSpacer />
  <DpButton variant="primary" emphasis="low" isLoading>
    Loading
  </DpButton>
  <DpSpacer />
  <DpButton variant="secondary" isLoading>
    Loading
  </DpButton>
  <DpSpacer />
  <DpButton variant="secondary" emphasis="low" isLoading>
    Loading
  </DpButton>
  <DpSpacer />
  <DpButton variant="danger" isLoading>
    Loading
  </DpButton>
  <DpSpacer />
  <DpButton variant="danger" emphasis="low" isLoading>
    Loading
  </DpButton>
</View>

<View style={C.itemsStart}>
  <DpButton variant="primary" isLoading>
    Loading
  </DpButton>
  <DpSpacer />
  <DpButton variant="primary" emphasis="low" isLoading>
    Loading
  </DpButton>
  <DpSpacer />
  <DpButton variant="secondary" isLoading>
    Loading
  </DpButton>
  <DpSpacer />
  <DpButton variant="secondary" emphasis="low" isLoading>
    Loading
  </DpButton>
  <DpSpacer />
  <DpButton variant="danger" isLoading>
    Loading
  </DpButton>
  <DpSpacer />
  <DpButton variant="danger" emphasis="low" isLoading>
    Loading
  </DpButton>
</View>

Disabled state

Disabled

<View style={C.itemsStart}>
  <DpButton variant="primary" disabled>
    Disabled
  </DpButton>
  <DpSpacer />
  <DpButton variant="primary" emphasis="low" disabled>
    Disabled
  </DpButton>
  <DpSpacer />
  <DpButton variant="secondary" disabled>
    Disabled
  </DpButton>
  <DpSpacer />
  <DpButton variant="secondary" emphasis="low" disabled>
    Disabled
  </DpButton>
  <DpSpacer />
  <DpButton variant="danger" disabled>
    Disabled
  </DpButton>
  <DpSpacer />
  <DpButton variant="danger" emphasis="low" disabled>
    Disabled
  </DpButton>
</View>

<View style={C.itemsStart}>
  <DpButton variant="primary" disabled>
    Disabled
  </DpButton>
  <DpSpacer />
  <DpButton variant="primary" emphasis="low" disabled>
    Disabled
  </DpButton>
  <DpSpacer />
  <DpButton variant="secondary" disabled>
    Disabled
  </DpButton>
  <DpSpacer />
  <DpButton variant="secondary" emphasis="low" disabled>
    Disabled
  </DpButton>
  <DpSpacer />
  <DpButton variant="danger" disabled>
    Disabled
  </DpButton>
  <DpSpacer />
  <DpButton variant="danger" emphasis="low" disabled>
    Disabled
  </DpButton>
</View>

Icons

Standard icon



Back



Back

Continue



Continue



<View style={[C.itemsStart]}>
  <DpButton variant="primary" iconLeft={DpIcons.ArrowArrowLeft}>
    Back
  </DpButton>
  <DpSpacer />
  <DpButton variant="secondary" iconLeft={DpIcons.ArrowArrowLeft}>
    Back
  </DpButton>
  <DpSpacer />
  <DpButton variant="primary" iconRight={DpIcons.ArrowArrowRight}>
    Continue
  </DpButton>
  <DpSpacer />
  <DpButton variant="secondary" iconRight={DpIcons.ArrowArrowRight}>
    Continue
  </DpButton>
</View>

<View style={[C.itemsStart]}>
  <DpButton variant="primary" iconLeft={DpIcons.ArrowArrowLeft}>
    Back
  </DpButton>
  <DpSpacer />
  <DpButton variant="secondary" iconLeft={DpIcons.ArrowArrowLeft}>
    Back
  </DpButton>
  <DpSpacer />
  <DpButton variant="primary" iconRight={DpIcons.ArrowArrowRight}>
    Continue
  </DpButton>
  <DpSpacer />
  <DpButton variant="secondary" iconRight={DpIcons.ArrowArrowRight}>
    Continue
  </DpButton>
</View>

Custom icon

Custom

<View style={C.itemsStart}>
  <DpButton
    variant="secondary"
    iconLeft={
      <View style={[C.h4, C.w4, bgColor(palette.black), C.radius2]} />
    }
  >
    Custom
  </DpButton>
</View>

<View style={C.itemsStart}>
  <DpButton
    variant="secondary"
    iconLeft={
      <View style={[C.h4, C.w4, bgColor(palette.black), C.radius2]} />
    }
  >
    Custom
  </DpButton>
</View>

Docplanner Mobile UI

Button

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

Properties