@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