@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

$3

| 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 |

Links

- Storybook Showcase
- GitHub source code
- Create GitHub issue
- CHANGELOG