# Badge

Our basic badge component.

## Installation

1. Since we use peer dependencies to minimize library duplication, ensure you have the following dependencies loaded within your project

```sh
yarn add @lightspeed/cirrus-tokens emotion@9 react-emotion@9 styled-system@3 polished@2
```

2. Install the component library

```sh
yarn add @lightspeed/cirrus-badge
```

3. Hook the `<ThemeProvider>` and the theme in your app.

```jsx
// 1. Import the theme provider from emotion-theming
//    This is needed to forward all our tokens to the components
import { ThemeProvider } from 'emotion-theming';

// 2. Import the base theme from cirrus-tokens
//    There's nothing magical about this file. it's literally
//    a plain old javascript object with keys and values that
//    map to the tokens/design-system
import cirrusTheme from '@lightspeed/cirrus-tokens/theme/default';

/* Within your root app component */
class App extends React.Component {
  render() {
    return (
      {/* 
        3. Wrap the children with ThemeProvider and pass in
        the cirrus theme into the theme prop.
      */}
      <ThemeProvider theme={cirrusTheme}>
        {/* Whatever children */ }
      </ThemeProvider>
    );
  }
}
```

4. Import `{ Badge }` and use right away!

### React Components

#### `<Badge>`

| Prop | Type | Description |
| ---- | ---- | ----------- |
| `children` | React.ReactNode | The content to display inside the button |
| `type` | `'default', 'info', 'success', 'info', 'important', 'warning', 'danger'` | Style of badge |
| `size` | `'small', 'medium'` | Change size of badge |
| `bg` | string | Custom background color. Accepts any valid CSS color, i.e: `#000` |
| `color` | string | Custom text color. Accepts any valid CSS color, i.e: `#fff` |

#### `<PillBadge>`
_extends `<Badge>`_

#### Example

```js
import React from 'react';
import { Badge, PillBadge } from '@lightspeed/cirrus-badge';

const MyComponent = () =>
  <div>
    <Badge>My Badge</Badge>
    <PillBadge>My PillBadge</PillBadge>
  </div>;

export default MyComponent;
```