npm package: @paprika/counter
Description: The Counter component is a decorative element that usually displays the count of a specific object.
Author: @paprika
Latest version: 1.1.13

<!-- start: Autogenerated - do not modify -->

# @paprika/counter

## Description

The Counter component is a decorative element that usually displays the count of a specific object.

## Installation

```
yarn add @paprika/counter
```

or with npm:

```
npm install @paprika/counter
```

## Props

### Counter

| Prop         | Type                                                                           | required | default                   | Description                                                                                                          |
| ------------ | ------------------------------------------------------------------------------ | -------- | ------------------------- | -------------------------------------------------------------------------------------------------------------------- |
| color        | [ Counter.types.color.GREY, Counter.types.color.BLUE, Counter.types.color.RED] | false    | Counter.types.color.GREY  | Background color of the counter.                                                                                     |
| hasIndicator | bool                                                                           | false    | false                     | If the counter should display a red dot on the top right corner. Normally used to indicate when there are new items. |
| quantity     | number                                                                         | true     | -                         | The number displayed inside the counter.                                                                             |
| size         | [ Counter.types.size.SMALL, Counter.types.size.MEDIUM]                         | false    | Counter.types.size.MEDIUM | Size of counter. It can be small or medium. Default is medium.                                                       |
| threshold    | number                                                                         | false    | 99                        | When quantity exceeds threshold, it will display "(Threshold)+" inside the counter. Default is 99.                   |

<!-- end: Autogenerated - do not modify -->
<!-- content -->

### Usage

For a common use case

```js
import Counter from "@paprika/counter";

<Counter quantity="33" />;
```

Overwrite threshold

```js
import Counter from "@paprika/counter";

<Counter quantity="33" threshold="5" />;
```

<!-- eoContent -->

## Links

- [Storybook Showcase](https://paprika.highbond.com/?path=/story/display-counter--showcase)
- [GitHub source code](https://github.com/acl-services/paprika/tree/master/packages/Counter/src)
- [Create GitHub issue](https://github.com/acl-services/paprika/issues/new?label=[]&title=@paprika/counter%20[help]:%20your%20short%20description&body=%0A%23%20Help%20wanted%0A%0A%23%23%20Please%20write%20your%20question.%0A*A%20clear%20and%20concise%20description%20of%20what%20the%20question%20is*%0A%0A%23%23%20Additional%20context%0A*Add%20any%20other%20context%20or%20screenshots%20about%20your%20question%20here.*%0A)
- [CHANGELOG](https://github.com/acl-services/paprika/tree/master/packages/Counter/CHANGELOG.md)