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 | unionPossible 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 | unionPossible 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 | FunctionSee signature. | | | Called when remove button is clicked. | | onClick | FunctionSee signature. | | | Called when tag element is clicked. This is not called when remove button is clicked. | | horizontalConstraint | unionPossible 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 | unionPossible 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;