# bpk-component-badge
> Backpack React Native badge component.
## Default
| Day | Night |
| --- | --- |
| 
| 
|
| 
| 
|
## With icon
| Day | Night |
| --- | --- |
| 
| 
|
| 
| 
|
## With trailing icon
| Day | Night |
| --- | --- |
| 
| 
|
| 
| 
|
## With multiple icons
| Day | Night |
| --- | --- |
| 
| 
|
| 
| 
|
## Docked start
| Day | Night |
| --- | --- |
| 
| 
|
| 
| 
|
## Docked end
| Day | Night |
| --- | --- |
| 
| 
|
| 
| 
|
## Installation
Check the main [Readme](https://github.com/skyscanner/backpack-react-native#usage) for a complete installation guide.
## Usage
```js
import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
import BpkBadge, {
BpkBadgeIcons,
BADGE_TYPES,
BADGE_DOCKED_TYPES,
BADGE_ACCESSORY_VIEW_ALIGNMENTS,
} from 'backpack-react-native/bpk-component-badge';
import BpkIcon, { icons } from 'backpack-react-native/bpk-component-icon';
import { spacingBase } from '@skyscanner/bpk-foundations-react-native/tokens/base.react.native';
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
padding: spacingBase,
}
});
export default class App extends Component {
render() {
return (
, ]}
separator="+"
/>
}
accessoryViewAlignment={BADGE_ACCESSORY_VIEW_ALIGNMENTS.leading}
/>
);
}
}
```
## Props
| Property | PropType | Required | Default Value |
| ---------------------- | --------------------------------------------------------------------------| --------------------- | ------------- |
| accessibilityLabel | string | if `message === null` | props.message |
| accessoryView | element | false | null |
| accessoryViewAlignment | oneOf('leading', 'trailing') | false | 'leading' |
| docked | oneOf('start', 'end') | false | null |
| message | string | false | null |
| type | oneOf('success', 'warning', 'destructive', 'light', 'inverse', 'outline') | false | warning |
## `accessoryView`
The accessory view allows for icons to be placed in front of the text inside the Badge component in conjunction with `BpkBadgeIcons`.
## `BpkBadgeIcons`
Renders icons suitable to be placed inside a Badge.
#### Theme Props
* `badgeSuccessBackgroundColor`
* `badgeWarningBackgroundColor`
* `badgeDestructiveBackgroundColor`
* `badgeSuccessTextColor`
* `badgeWarningTextColor`
* `badgeDestructiveTextColor`
### Props
| Property | PropType | Required | Default Value |
| --------- | ---------------- | -------- | ------------- |
| icons | arrayOf(BpkIcon) | true | - |
| itemStyle | style | false | null |
| separator | string | false | null |