Badges

Small numerical value or status descriptor for UI elements. Badge normally appears in proximity to notifications or user avatars with eye-catching appeal, typically displaying unread messages count.

The FlexNative Badges is part of the FlexNative Framework and is available under the @flexnative/badges NPM package.

Dependencies

@flexnative/theme-context

Installation

You can installing FlexNative Badges packages using npm:

npm i @flexnative/badges

API

import Badge from '@flexnative/badges';

Component

Badge

Type: React.PureComponent<BadgedProps>

Properties

info

TagProps props extends TextProps from react-native

Name	Type	Required	Default Value	Description
text	`string`	true	`undefined`	Text to display on badged.
textColor	`ColorValue`	false	`undefined`	Text Color.
backgroundColor	`ColorValue`	false	`undefined`	Badge background color.
children	`ReactNode`	true	`undefined`	ReactNode to render where to render the badge.
borderWidth	`BorderWidth`	false	`'none'`	Optional borders width.
position	`BadgePosition`	false	`'top-right'`	Badge position.
borderColor	`ColorValue`	false	`undefined`	Borders color according `react-native` ColorValue.
size	`BadgeSize`	false	`'default'`	Badge Size variable.
type	`BadgeType`	false	`'default'`	Badge type.
radius	`BadgeRadius`	false	`'full'`	Badge border radius.
color	`BadgeColor`	false	`theme.color.default`	Color by theme or a custom color according `react-native` ColorValue.

BorderWidth

Name	Type	Value
none	`number`	0
hairline	`StyleSheet.hairlineWidth`	This is defined as the width of a thin line on the platform. It can be used as the thickness of a border or division between two elements.
thin	`number`	1
base	`number`	2
thick	`number`	3
	`number`	Any number value

BadgePosition

One of 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | Position

Name	Type	Value
top-left	`object`	`{ top: -10, left: -10 }`
top-right	`object`	`{ top: -10, right: -10 }`
bottom-left	`object`	`{ bottom: -10, left: -10 }`
bottom-right	`object`	`{ bottom: -10, right: -10 }`
position	`Position`	`undefined`

Position

Name	Type	Required
top	`number`	false
bottom	`number`	false
left	`number`	false
right	`number`	false

BadgeSize

One of 'small' | 'medium' | 'large' | number

Name	Type	Value
small	`number`	12
default	`number`	16
medium	`number`	20
large	`number`	24

BadgeType

One of 'default' | 'text' | 'ghost'

Name	Type	Description
default	`string`	Badge filled with solid background.
text	`string`	Badge with only text, ith transparet background.
ghost	`string`	Badge filled with a transparet background. warning To have good appearance for `'ghost'`, with custom color you should use hex colors.

BadgeRadius

Name	Type	Value
none	`number`	0
small	`number`	2
medium	`number`	4
large	`number`	6
full	`number`	99999
	`number`	Any number value.

BadgeColor

Name	Type	Value	Preview
Name	Type	Value	Light	Dark
background	`ColorValue`	`theme.colors.background`	`#f8f8f8`	`#000000`
default	`ColorValue`	`theme.colors.default`	`#f5f5f5`	`#404040`
card	`ColorValue`	`theme.colors.card`	`#ffffff`	`#232323`
text	`ColorValue`	`theme.colors.text`	`#424242`	`#ffffff`
border	`ColorValue`	`theme.colors.border`	`#42424226`	`#ffffff1A`
placeholder	`ColorValue`	`theme.colors.placeholder`	`#0000001A`	`#FFFFFF1A`
info	`ColorValue`	`theme.colors.info`	`#3e80ed`	`#3e80ed`
success	`ColorValue`	`theme.colors.success`	`#5ec232`	`#5ec232`
warning	`ColorValue`	`theme.colors.warning`	`#ffc107`	`#ffc107`
error	`ColorValue`	`theme.colors.error`	`#d51923`	`#d51923`
dark	`ColorValue`	`theme.colors.dark`	`#424242`	`#424242`
secondary	`ColorValue`	`theme.colors.secondary`	`#666666`	`#5C5C5C`
light	`ColorValue`	`theme.colors.light`	`#ebebeb`	`#ebebeb`
primary	`ColorValue`	`theme.colors.primary`	`#ff6358`	`#ff6358`
	`ColorValue`	Any `ColorValue` chosen by developer.

Usecase Examples

The following example demonstrates the FlexNative Badges in action.

Background Color

Preview
Code

import React from 'react';

import Badge from '@flexnative/badges';
import Button from '@flexnative/buttons';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block'>
        <Badge text='10' backgroundColor='crimson'>
          <Button text="crimson"/>
        </Badge>
        <Badge text='10' backgroundColor='#ed143d'>
          <Button text="#ed143d"/>
        </Badge>
        <Badge text='10' backgroundColor='rgb(237, 20, 61)'>
          <Button text="rgb(237, 20, 61)"/>
        </Badge>
        <Badge text='10' backgroundColor='rgba(237, 20, 61, 0.5)'>
          <Button text="rgba(237, 20, 61, 0.5)"/>
        </Badge>
      </div>
    );
  }
}

Border Color

Preview
Code

import React from 'react';

import Badge from '@flexnative/badges';
import Button from '@flexnative/buttons';



export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block'>
        <Badge text='10' type='text' color='primary' borderColor='crimson' borderWidth='hairline'>
          <Button text="crimson"/>
        </Badge>
        <Badge text='10' type='text' color='primary' borderColor='#ed143d' borderWidth='hairline'>
          <Button text="#ed143d"/>
        </Badge>
        <Badge text='10' type='text' color='primary' borderColor='rgb(237, 20, 61)' borderWidth='hairline'>
          <Button text="rgb(237, 20, 61)"/>
        </Badge>
        <Badge text='10' type='text' color='primary' borderColor='rgba(237, 20, 61, 0.5)' borderWidth='hairline'>
          <Button text="rgba(237, 20, 61, 0.5)"/>
        </Badge>
      </div>
    );
  }
}

Border Width

Preview
Code

import React from 'react';

import Badge from '@flexnative/badges';
import Button from '@flexnative/buttons';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block'>
        <Badge text='10' type='ghost' color='primary' borderWidth='none'>
          <Button text="none (default)"/>
        </Badge>
        <Badge text='10' type='ghost' color='primary' borderWidth='hairline'>
          <Button text="hairline"/>
        </Badge>
        <Badge text='10' type='text' color='primary' borderWidth='thin'>
          <Button text="thin"/>
        </Badge>
        <Badge text='10' type='text' color='primary' borderWidth='base'>
          <Button text="base"/>
        </Badge>
        <Badge text='10' type='text' color='primary' borderWidth='thick'>
          <Button text="thick"/>
        </Badge>
        <Badge text='10' type='text' color='primary' borderWidth={2}>
          <Button text="2"/>
        </Badge>
      </div>
    );
  }
}

Border Radius

Preview
Code

import React from "react";

import Badge from '@flexnative/badges';
import Button from '@flexnative/buttons';


export default class extends React.PureComponent<{}, {}> {
  public render() {
    return (
      <div className='example-block'>
        <Badge text='10' color='primary' radius='none' >
          <Button text="none"/>
        </Badge>
        <Badge text='10' color='primary' radius='small' >
          <Button text="small"/>
        </Badge>
        <Badge text='10' color='primary' radius='medium' >
          <Button text="medium"/>
        </Badge>
        <Badge text='10' color='primary' radius='large' >
          <Button text="large"/>
        </Badge>
        <Badge text='10' color='primary' radius='full' >
          <Button text="full (default)"/>
        </Badge>
        <Badge text='10' color='primary' radius={5} >
          <Button text="5"/>
        </Badge>
      </div>
    );
  }
}

Colors

Preview
Code

import React from 'react';

import Badge from '@flexnative/badges';
import Button from '@flexnative/buttons';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block'>
        <Badge text="10" color='primary'>
          <Button text="primary" />
        </Badge>
        <Badge text='10' color='secondary'>
          <Button text="secondary"/>
        </Badge>
        <Badge text='10' color='success'>
          <Button text="success"/>
        </Badge>
        <Badge text='10' color='info'>
          <Button text="info"/>
        </Badge>
        <Badge text='10' color='warning'>
          <Button text="warning"/>
        </Badge>
        <Badge text='10' color='error'>
          <Button text="error"/>
        </Badge>
        <Badge text='10' color='default'>
          <Button text="default"/>
        </Badge>
        <Badge text='10' color='dark'>
          <Button text="dark"/>
        </Badge>
        <Badge text='10' color='light'>
          <Button text="light"/>
        </Badge>
        <Badge text='10' color='crimson'>
          <Button text="crimson"/>
        </Badge>
        <Badge text='10' color='#ed143d'>
          <Button text="ed143d"/>
        </Badge>
        <Badge text='10' color='rgb(237, 20, 61)'>
          <Button text="rgb(237, 20, 61)"/>
        </Badge>
        <Badge text='10' color='rgba(237, 20, 61, 0.5)'>
          <Button text="rgba(237, 20, 61, 0.5)"/>
        </Badge>
      </div>
    );
  }
}

Position

Preview
Code

import React from 'react';

import Badge from '@flexnative/badges';
import Button from '@flexnative/buttons';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block'>
        <Badge text='10' color='primary' position='top-left'>
          <Button text="top-left"/>
        </Badge>
        <Badge text='10' color='primary' position='top-right'>
          <Button text="top-right (default)"/>
        </Badge>
        <Badge text='10' color='primary' position='bottom-left'>
          <Button text="bottom-left"/>
        </Badge>
        <Badge text='10' color='primary' position='bottom-right'>
          <Button text="bottom-right"/>
        </Badge>
        <Badge text='10' color='primary' position={{ top: 5, bottom: 8, right: -25 }}>
          <Button text="{ top: 5, bottom: 8, right: -25 }"/>
        </Badge>
      </div>
    );
  }
}

Size

Preview
Code

import React from 'react';

import Badge from '@flexnative/badges';
import Button from '@flexnative/buttons';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block'>
        <Badge text="10" color='primary' size="small">
          <Button text="small"/>
        </Badge>
        <Badge text='10' color='primary' size="default">
          <Button text="default"/>
        </Badge>
        <Badge text='10' color='primary' size="medium">
          <Button text="medium"/>
        </Badge>
        <Badge text='10' color='primary' size="large">
          <Button text="large"/>
        </Badge>
      </div>
    );
  }
}

Text Color

Preview
Code

import React from 'react';

import Badge from '@flexnative/badges';
import Button from '@flexnative/buttons';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block'>
        <Badge text='10' textColor='crimson'>
          <Button text="crimson"/>
        </Badge>
        <Badge text='10' textColor='#ed143d'>
          <Button text="#ed143d"/>
        </Badge>
        <Badge text='10' textColor='rgb(237, 20, 61)'>
          <Button text="rgb(237, 20, 61)"/>
        </Badge>
        <Badge text='10' textColor='rgba(237, 20, 61, 0.5)'>
          <Button text="rgba(237, 20, 61, 0.5)"/>
        </Badge>
      </div>
    );
  }
}

TextProps

Preview
Code

import React from 'react';
import { Alert, Platform } from 'react-native';

import Badge from '@flexnative/badges';
import Button from '@flexnative/buttons';


export default class extends React.PureComponent<{}, {}> {
  constructor(props: {}) {
    super(props);
    this.openAlert = this.openAlert.bind(this);
  }

  openAlert = () => {
    if (Platform.OS === 'web') {
      alert("Badge clicked...")
    } else {
        Alert.alert("Badge", "Badge clicked...")
    }
  }

  render() {
    return (
      <div className='example-block'>
        <Badge text='10' type='default' color='primary' onPress={this.openAlert} allowFontScaling={true}>
          <Button text="default"/>
        </Badge>
      </div>
    );
  }
}

Type

Preview
Code

import React from 'react';

import Badge from '@flexnative/badges';
import Button from '@flexnative/buttons';


export default class extends React.PureComponent<{}, {}> {
  render() {
    return (
      <div className='example-block'>
        <Badge text='10' type='default' color='primary'>
          <Button text="default"/>
        </Badge>
        <Badge text='10' type='ghost' color='primary'>
          <Button text="ghost"/>
        </Badge>
        <Badge text='10' type='text' color='primary'>
          <Button text="text"/>
        </Badge>
      </div>
    );
  }
}

Playground

Live Editor

//Play with props to see live changes;

render(
  <Badge text='10' type='default' color='error'>
    <Button color='primary' text="Playground"/>
  </Badge>
);

Result

Dependencies​

Installation​

API​

Component​

Properties​

BorderWidth​

BadgePosition​

Position​

BadgeSize​

BadgeType​

BadgeRadius​

BadgeColor​

Usecase Examples​

Background Color​

Border Color​

Border Width​

Border Radius​

Colors​

Position​

Size​

Text Color​

TextProps​

Type​

Playground​

Dependencies

Installation

API

Component

Properties

BorderWidth

BadgePosition

Position

BadgeSize

BadgeType

BadgeRadius

BadgeColor

Usecase Examples

Background Color

Border Color

Border Width

Border Radius

Colors

Position

Size

Text Color

TextProps

Type

Playground