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.
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
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
import { Tag } from '@commercetools-uikit/tag';
const Example = () => (
<Tag
type="normal"
isDisabled={false}
to="/project-key/products/icecream"
onRemove={() => {}}
>
Icecream
</Tag>
);
export default Example;
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. | |
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 input field. | |
children |
ReactNode |
✅ | Content rendered within the tag |
(
event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>
) => void
(event: MouseEvent<HTMLElement>) => void
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.
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;