README

Tag

Description

A tag is often used for items that need to be labeled or categorized. This might apply to search terms or categories of a product. Tags can also have a "remove" button.

Where to use

Main Functions and use cases are:

Remove from a set example: Removing products from categories
Showing a set example: List of categories a product is in

Installation

yarn add @commercetools-uikit/tag

npm --save install @commercetools-uikit/tag

Additionally install the peer dependencies (if not present)

yarn add react react-router-dom

npm --save install react react-router-dom

Usage

import Tag from '@commercetools-uikit/tag';

const Example = () => (
  <Tag
    type="normal"
    isDisabled={false}
    to="/project-key/products/icecream"
    onRemove={() => {}}
  >
    Icecream
  </Tag>
);

export default Example;

Properties

Props	Type	Required	Default	Description
`type`	`union` Possible values: `'normal' , 'warning'`		`'normal'`	Indicates color scheme of the tag.
`styles`	`Record`			Styles object that is spread into the tag body.
`to`	`union` Possible values: `string , LocationDescriptor`			Link of the tag when not disabled
`isDisabled`	`boolean`		`false`	Disable the tag element along with the option to remove it.
`onRemove`	`Function` See signature.			Called when remove button is clicked.
`onClick`	`Function` See signature.			Called when tag element is clicked. This is not called when remove button is clicked.
`horizontalConstraint`	`union` Possible values: `, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'`		`'scale'`	Horizontal size limit of the input field.
`children`	`ReactNode`	✅		Content rendered within the tag

Signatures

Signature `onRemove`

(
  event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>
) => void

Signature `onClick`

(event: MouseEvent<HTMLElement>) => void

Usage no npm install needed!