@commercetools-uikit/tag

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'			Indicates color scheme of the tag. @deprecated use tone instead
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.
isDraggable	boolean		false	Adds the draggable icon on the left side.
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 tag.
children	ReactNode	✅		Content rendered within the tag
tone	union Possible values: 'primary' , 'warning' , 'surface'		'primary'	Indicates the color scheme of the tag.

Signatures

Signature onRemove

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

Signature onClick

(event: MouseEvent<HTMLElement>) => void

TagList

Description

A TagList component is used as wrapper for the list of tags. It has predefined spacings and flex display so that tags are grouped next to each other.

Usage

The <TagList> component accepts <Tag> element as children props. Here's an example of how to use them:

import { Tag, TagList } from '@commercetools-uikit/tag';

const Example = () => (
  <TagList>
    {['apple', 'orange'].map((tag, index) => (
      <Tag key={index}>{tag}</Tag>
    ))}
  </TagList>
);

export default Example;