npm package: @paprika/tag
Description: Tag can be both static UI labels or removable components. Static Tag is mostly used to show an item’s status. A removable Tag should be used to add or group objects.
Author: @paprika
Latest version: 3.0.4

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

# @paprika/tag

## Description

Tag can be both static UI labels or removable components. Static Tag is mostly used to show an item’s status. A removable Tag should be used to add or group objects.

## Installation

```
yarn add @paprika/tag
```

or with npm:

```
npm install @paprika/tag
```

## Props

### Tag

| Prop       | Type                                                                                                                                                                                                                                                                                                                                                    | required | default               | Description                                                                               |
| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | --------------------- | ----------------------------------------------------------------------------------------- |
| a11yText   | string                                                                                                                                                                                                                                                                                                                                                  | false    | null                  | used in aria-tag on the root element                                                      |
| avatar     | node                                                                                                                                                                                                                                                                                                                                                    | false    | null                  | Can pass a avatar to be displayed to the left of the tag content                          |
| children   | node                                                                                                                                                                                                                                                                                                                                                    | true     | -                     | Content to show in the central area of the tag                                            |
| isDisabled | bool                                                                                                                                                                                                                                                                                                                                                    | false    | false                 | Disables tag onClick and remove button functionality                                      |
| onClick    | func                                                                                                                                                                                                                                                                                                                                                    | false    | null                  | Fires when clicking the root element. Should also pass value for a11yText when using this |
| onRemove   | func                                                                                                                                                                                                                                                                                                                                                    | false    | null                  | Pass a function to show a remove button                                                   |
| size       | [ Tag.types.size.MEDIUM, Tag.types.size.LARGE]                                                                                                                                                                                                                                                                                                          | false    | Tag.types.size.MEDIUM | Size of the tag(font size, min-height, padding, etc).                                     |
| theme      | [ Tag.types.theme.BLACK, Tag.types.theme.BLUE, Tag.types.theme.GREEN, Tag.types.theme.GREY, Tag.types.theme.LIGHT_BLUE, Tag.types.theme.LIGHT_ORANGE, Tag.types.theme.ORANGE, Tag.types.severityTheme.NO_RISK, Tag.types.severityTheme.LOW_RISK, Tag.types.severityTheme.MEDIUM_RISK, Tag.types.severityTheme.HIGH_RISK, Tag.types.severityTheme.ALERT] | false    | Tag.types.theme.GREY  | Visual theme of the tag                                                                   |

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

<!-- eoContent -->

## Links

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