Docplanner Mobile UI

Edit page

Badge

Use Badges to inform users about premium features or new features release.

Properties

color

info

🎨 Color variant

emphasis

"high" | "low" | undefined

high

Color variant emphasis

children

string | Text | undefined

Text to be displayed inside the badge it can be a string or a Text component (including DPText)

style

StyleProp<ViewStyle>

Contextual style, use only as last resort

Basic usage

blue

<View>
  <DpBadge color="info">blue</DpBadge>
</View>

<View>
  <DpBadge color="info">blue</DpBadge>
</View>

Variations

info

calm

success

warning

alert

gray

<View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
  <DpBadge color="info">info</DpBadge>
  <DpBadge color="calm">calm</DpBadge>
  <DpBadge color="success">success</DpBadge>
  <DpBadge color="warning">warning</DpBadge>
  <DpBadge color="danger">alert</DpBadge>
  <DpBadge color="gray">gray</DpBadge>
</View>

<View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
  <DpBadge color="info">info</DpBadge>
  <DpBadge color="calm">calm</DpBadge>
  <DpBadge color="success">success</DpBadge>
  <DpBadge color="warning">warning</DpBadge>
  <DpBadge color="danger">alert</DpBadge>
  <DpBadge color="gray">gray</DpBadge>
</View>

Variations without Enfasis

info

calm

success

warning

danger

gray

<View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
  <DpBadge color="info" emphasis="low">
    info
  </DpBadge>
  <DpBadge color="calm" emphasis="low">
    calm
  </DpBadge>
  <DpBadge color="success" emphasis="low">
    success
  </DpBadge>
  <DpBadge color="warning" emphasis="low">
    warning
  </DpBadge>
  <DpBadge color="danger" emphasis="low">
    danger
  </DpBadge>
  <DpBadge color="gray" emphasis="low">
    gray
  </DpBadge>
</View>

<View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
  <DpBadge color="info" emphasis="low">
    info
  </DpBadge>
  <DpBadge color="calm" emphasis="low">
    calm
  </DpBadge>
  <DpBadge color="success" emphasis="low">
    success
  </DpBadge>
  <DpBadge color="warning" emphasis="low">
    warning
  </DpBadge>
  <DpBadge color="danger" emphasis="low">
    danger
  </DpBadge>
  <DpBadge color="gray" emphasis="low">
    gray
  </DpBadge>
</View>

Usage with Text components inside

You can use a Text or DpText component within the badge if you need better control over the text styles.

With DpText

With DpText and type "badge"

With Text

<View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
  <DpBadge color="info">
    <DpText color={palette.white}>With DpText</DpText>
  </DpBadge>
  <DpBadge color="info">
    <DpText color="white" type={textTypes.badge.regular}>
      With DpText and type "badge"
    </DpText>
  </DpBadge>
  <DpBadge color="calm">
    <Text style={{ color: 'white' }}>With Text</Text>
  </DpBadge>
</View>

<View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
  <DpBadge color="info">
    <DpText color={palette.white}>With DpText</DpText>
  </DpBadge>
  <DpBadge color="info">
    <DpText color="white" type={textTypes.badge.regular}>
      With DpText and type "badge"
    </DpText>
  </DpBadge>
  <DpBadge color="calm">
    <Text style={{ color: 'white' }}>With Text</Text>
  </DpBadge>
</View>

Examples using badges in different contexts

Hello world

gray

Profile

New

Premium

Kaiya Septimus

<View
  style={{
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
  }}
>
  <View style={{ flexDirection: 'row', alignItems: 'center' }}>
    <Roboto size="2xl">Hello world</Roboto>
    <View style={{ marginLeft: '8px' }}>
      <DpBadge color="gray" emphasis="low">
        gray
      </DpBadge>
    </View>
  </View>
  <View style={{ flexDirection: 'row', alignItems: 'center' }}>
    <Roboto size="2xl">Profile</Roboto>
    <View style={{ marginLeft: '8px' }}>
      <DpBadge color="danger">New</DpBadge>
    </View>
  </View>
  <View style={{ flexDirection: 'row', alignItems: 'center' }}>
    <View
      style={{
        width: '48px',
        height: '48px',
        backgroundColor: '#627282',
        borderRadius: '50%',
      }}
    />
    <View
      style={{
        flexDirection: 'column',
        alignItems: 'flex-start',
        marginLeft: '8px',
      }}
    >
      <DpBadge color="warning" emphasis="low">
        Premium
      </DpBadge>
      <Roboto size="md">Kaiya Septimus</Roboto>
    </View>
  </View>
</View>

<View
  style={{
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
  }}
>
  <View style={{ flexDirection: 'row', alignItems: 'center' }}>
    <Roboto size="2xl">Hello world</Roboto>
    <View style={{ marginLeft: '8px' }}>
      <DpBadge color="gray" emphasis="low">
        gray
      </DpBadge>
    </View>
  </View>
  <View style={{ flexDirection: 'row', alignItems: 'center' }}>
    <Roboto size="2xl">Profile</Roboto>
    <View style={{ marginLeft: '8px' }}>
      <DpBadge color="danger">New</DpBadge>
    </View>
  </View>
  <View style={{ flexDirection: 'row', alignItems: 'center' }}>
    <View
      style={{
        width: '48px',
        height: '48px',
        backgroundColor: '#627282',
        borderRadius: '50%',
      }}
    />
    <View
      style={{
        flexDirection: 'column',
        alignItems: 'flex-start',
        marginLeft: '8px',
      }}
    >
      <DpBadge color="warning" emphasis="low">
        Premium
      </DpBadge>
      <Roboto size="md">Kaiya Septimus</Roboto>
    </View>
  </View>
</View>

Docplanner Mobile UI

Badge

.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

Variations without Enfasis

Usage with Text components inside

Examples using badges in different contexts

Properties