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

Links

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