19.13.0 • Published 9 months ago

@commercetools-uikit/tag v19.13.0

Weekly downloads
3,330
License
MIT
Repository
github
Last release
9 months ago

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

PropsTypeRequiredDefaultDescription
typeunionPossible values:'normal' , 'warning'Indicates color scheme of the tag. @deprecated use tone instead
stylesRecordStyles object that is spread into the tag body.
tounionPossible values:string , LocationDescriptorLink of the tag when not disabled
isDisabledbooleanfalseDisable the tag element along with the option to remove it.
isDraggablebooleanfalseAdds the draggable icon on the left side.
onRemoveFunctionSee signature.Called when remove button is clicked.
onClickFunctionSee signature.Called when tag element is clicked. This is not called when remove button is clicked.
horizontalConstraintunionPossible 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.
childrenReactNodeContent rendered within the tag
toneunionPossible 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;
19.13.0

9 months ago

19.12.1

9 months ago

19.11.0

11 months ago

19.12.0

10 months ago

19.10.0

11 months ago

19.8.0

12 months ago

19.6.0

1 year ago

19.4.0

1 year ago

19.7.0

1 year ago

19.5.0

1 year ago

19.9.0

12 months ago

19.3.1

1 year ago

19.3.0

1 year ago

19.2.0

1 year ago

19.1.0

1 year ago

19.0.0

1 year ago

18.5.0

1 year ago

18.4.0

1 year ago

18.3.0

1 year ago

18.2.0

1 year ago

18.1.0

1 year ago

18.0.0

1 year ago

17.1.0

1 year ago

17.0.1

1 year ago

17.0.0

1 year ago

16.12.1

2 years ago

16.12.0

2 years ago

16.5.0

2 years ago

16.6.1

2 years ago

16.6.0

2 years ago

16.4.1

2 years ago

16.9.0

2 years ago

16.7.3

2 years ago

16.7.2

2 years ago

16.7.1

2 years ago

16.7.0

2 years ago

16.7.5

2 years ago

16.7.4

2 years ago

16.8.0

2 years ago

16.11.0

2 years ago

16.10.0

2 years ago

16.4.0

2 years ago

16.3.0

2 years ago

16.2.1

2 years ago

16.2.0

2 years ago

16.1.1

2 years ago

16.1.0

2 years ago

15.15.0

2 years ago

15.15.1

2 years ago

16.0.0

2 years ago

15.13.2

2 years ago

15.14.3

2 years ago

15.14.1

2 years ago

15.14.2

2 years ago

15.14.0

2 years ago

15.13.1

2 years ago

15.13.0

2 years ago

15.12.0

2 years ago

15.9.0

3 years ago

15.10.0

2 years ago

15.11.2

2 years ago

15.11.0

2 years ago

15.11.1

2 years ago

15.7.0

3 years ago

15.8.0

3 years ago

15.5.0

3 years ago

15.5.1

3 years ago

15.6.0

3 years ago

15.4.0

3 years ago

15.3.0

3 years ago

15.2.4

3 years ago

15.2.1

3 years ago

15.2.2

3 years ago

15.2.3

3 years ago

15.1.1

3 years ago

15.1.2

3 years ago

15.1.0

3 years ago

15.2.0

3 years ago

15.0.0

3 years ago

13.0.4

3 years ago

14.0.0

3 years ago

14.0.1

3 years ago

13.0.2

3 years ago

13.0.0

3 years ago

12.2.9

4 years ago

12.2.5

4 years ago

12.2.6

4 years ago

12.2.7

4 years ago

12.2.4

4 years ago

12.2.3

4 years ago

12.2.2

4 years ago

12.2.1

4 years ago

12.2.0

4 years ago

12.1.0

4 years ago

12.0.12

4 years ago

12.0.8

4 years ago

12.0.7

4 years ago

12.0.3

4 years ago

12.0.0

4 years ago

11.2.1

4 years ago

11.2.0

4 years ago

11.0.2

4 years ago

11.0.1

4 years ago

10.47.4

4 years ago

10.47.3

4 years ago

10.47.0

4 years ago

10.46.3

4 years ago

10.46.2

4 years ago

10.46.1

4 years ago

10.45.0

4 years ago

10.44.4

4 years ago

10.44.1

4 years ago

10.44.0

4 years ago

10.43.3

5 years ago

10.43.2

5 years ago

10.42.3

5 years ago

10.42.2

5 years ago

10.42.0

5 years ago

10.42.1

5 years ago

10.41.0

5 years ago

10.40.0

5 years ago

10.40.1

5 years ago

10.39.8

5 years ago

10.39.7

5 years ago

10.39.6

5 years ago

10.39.2

5 years ago

10.39.4

5 years ago

10.39.3

5 years ago

10.39.1

5 years ago

10.38.0

5 years ago

10.36.0

5 years ago

10.35.1

5 years ago

10.33.0

5 years ago

10.31.0

5 years ago

10.30.1

5 years ago

10.27.0

5 years ago

10.24.0

5 years ago

10.22.1

5 years ago

10.22.0

5 years ago

10.21.0

5 years ago

10.20.0

5 years ago

10.19.0

5 years ago

10.18.7-canary.5

5 years ago

10.18.7-canary.6

5 years ago

10.18.7-canary.7

5 years ago

10.18.7-canary.4

5 years ago

10.18.7-canary.3

5 years ago

10.18.7-canary.2

5 years ago

10.18.7-canary.1

5 years ago

10.18.6-canary.1

5 years ago

10.18.7-canary.0

5 years ago

10.18.5-canary.4

5 years ago

10.18.6-canary.0

5 years ago

10.18.5-canary.3

5 years ago

10.18.5-canary.2

5 years ago

10.18.5-canary.1

5 years ago

10.18.5-canary.0

5 years ago

10.18.4

5 years ago

10.18.4-canary.9

5 years ago

10.18.4-canary.8

5 years ago

10.18.4-canary.7

5 years ago

10.18.4-canary.6

5 years ago

10.18.4-canary.3

5 years ago

10.18.4-canary.4

5 years ago

10.18.4-canary.5

5 years ago

10.18.4-canary.1

5 years ago

10.18.4-canary.2

5 years ago

10.18.4-canary.0

5 years ago

10.18.3-canary.2

5 years ago

10.18.3-canary.3

5 years ago

10.18.3-canary.1

5 years ago

10.18.3-canary.0

5 years ago

10.18.2

5 years ago

10.18.2-canary.3

5 years ago

10.18.2-canary.2

5 years ago

10.18.2-canary.1

5 years ago

10.17.1-canary.3

5 years ago

10.17.1-canary.2

5 years ago

10.18.1-canary.0

5 years ago

10.18.2-canary.0

5 years ago

10.18.0

5 years ago

10.17.1-canary.1

5 years ago

10.17.0

5 years ago

10.17.1-canary.0

5 years ago

10.16.1-canary.8

5 years ago

10.16.1-canary.7

5 years ago

10.16.1-canary.6

5 years ago

10.16.1-canary.5

5 years ago

10.16.1-canary.4

5 years ago

10.16.1-canary.3

5 years ago

10.16.1-canary.2

5 years ago

10.16.1-canary.1

5 years ago

10.16.1-canary.0

5 years ago

10.16.0

5 years ago

10.15.2-canary.4

5 years ago

10.15.2-canary.0

5 years ago

10.15.2-canary.2

5 years ago

10.15.2-canary.3

5 years ago

10.15.1-canary.6

5 years ago

10.15.1

5 years ago

10.15.1-canary.4

5 years ago

10.15.0

5 years ago

10.14.3-canary.4

5 years ago

10.14.1

6 years ago

10.14.1-canary.7

6 years ago

10.13.0

6 years ago

11.0.0-alpha.11

6 years ago

11.0.0-alpha.10

6 years ago

11.0.0-alpha.9

6 years ago

11.0.0-alpha.6

6 years ago

11.0.0-alpha.7

6 years ago

11.0.0-alpha.8

6 years ago

11.0.0-alpha.5

6 years ago

11.0.0-alpha.4

6 years ago

11.0.0-alpha.3

6 years ago

11.0.0-alpha.2

6 years ago

11.0.0-alpha.1

6 years ago

11.0.0-alpha.0

6 years ago