npm package: @paprika/pill
Description: DEPRECATED - The Pill component is for showing metadata like status, type, or levels.
Author: @paprika
Latest version: 1.0.10
Deprecated: Moved to @paprika/tag

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

# @paprika/pill

## Description

DEPRECATED - The Pill component is for showing metadata like status, type, or levels.

## Installation

```
yarn add @paprika/pill
```

or with npm:

```
npm install @paprika/pill
```

## Props

### Pill

| Prop       | Type                                                                                                                                                                                                                                                                                                            | required | default                | Description |
| ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ---------------------- | ----------- |
| a11yText   | string                                                                                                                                                                                                                                                                                                          | false    | null                   |             |
| children   | node                                                                                                                                                                                                                                                                                                            | true     | -                      |             |
| isDisabled | bool                                                                                                                                                                                                                                                                                                            | false    | false                  |             |
| onClick    | func                                                                                                                                                                                                                                                                                                            | false    | null                   |             |
| pillColor  | [ Pill.types.color.BLACK, Pill.types.color.BLUE, Pill.types.color.GREEN, Pill.types.color.GREY, Pill.types.color.ORANGE, Pill.types.color.LIGHT_BLUE, Pill.types.color.LIGHT_ORANGE, Pill.types.severity.NO_RISK, Pill.types.severity.LOW_RISK, Pill.types.severity.MEDIUM_RISK, Pill.types.severity.HIGH_RISK] | false    | Pill.types.color.GREY  |             |
| size       | [ Pill.types.size.SMALL, Pill.types.size.MEDIUM]                                                                                                                                                                                                                                                                | false    | Pill.types.size.MEDIUM |             |

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

## Pill

The `<Pill>` component is a decorate or interactive component that provides additional metadata such as: status, type or levels.

If an onClick handler is passed, it is rendered as a `<RawButton>`, otherwise it will be a decorated `<div>`.

Fore more information about the `<Pill>`, visit our [starling site](https://design.wegalvanize.com/p/components/pill).

### Usage

For a decorative pill

```js
import Pill from "@paprika/pill";

<Pill pillColor="mediumRisk">Medium risk</Pill>;
```

Or a interactive pill

```js
import Pill from "@paprika/pill";

<Pill pillColor="mediumRisk" onClick={clickHandler}>
  Click me
</Pill>;
```

Pill with an icon

```js
import Pill from "@paprika/pill";
import Icon from "@paprika/icon/lib/Upload";

<Pill pillColor="mediumRisk" size="small">
  <Icon />
  Medium risk with icon
</Pill>;
```

<!-- eoContent -->

## Links

- [Storybook Showcase](https://paprika.highbond.com/?path=/story/display-pill--showcase)
- [GitHub source code](https://github.com/acl-services/paprika/tree/master/packages/Pill/src)
- [Create GitHub issue](https://github.com/acl-services/paprika/issues/new?label=[]&title=@paprika/pill%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/Pill/CHANGELOG.md)