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>

This component uses the ThemeContext to apply theme-based styles. Component extending React.PureComponent, which is optimized for performance by implementing a shallow prop and state comparison.

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.
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	Sizes	false	'default'	Badge Size variable.
type	BadgeType	false	'default'	Badge type.
radius	BorderRadius	false	'full'	Badge border radius.
color	Color	false	theme.color.default	Color by theme or a custom color according react-native ColorValue.

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

BadgeType

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

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

Color

One of 'default' | 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | ColorValue

Name	Type	Value	Preview
			Light	Dark
white	ColorValue	theme.colors.white	#FFFFFF	#FFFFFF
black	ColorValue	theme.colors.black	#424242	#424242
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
overlay	ColorValue	theme.colors.overlay	#00000021	#FFFFFF21
	ColorValue	Any ColorValue chosen by developer.

Use case Examples

The following example demonstrates the FlexNative Badges in action.

Border Color

Preview

10

10

10

10

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

10

10

10

10

10

10

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

10

10

10

10

10

10

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

10

10

10

10

10

10

10

10

10

10

10

10

10

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

10

10

10

10

10

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

10

10

10

10

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

10

10

10

10

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

10

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

10

10

10

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

Loading...