Tag

v.5.0.0

Installation

yarn
pnpm
npm

yarn add @mercell/tag-react

pnpm add @mercell/tag-react

npm install --save @mercell/tag-react

The Tag has necessary peerDependencies, please make sure that you have them in your project

"@carbon/icons-react": "^10.49.0",
"@mercell/tailwind": "^6.0.1",
"classnames": "^2.3.1",
"react": "^17.0.2" 

Usage

Using the Ribbon component is as simple as importing it like this.

import { Tag } from '@mercell/tag-react';

Live Editor

// You can play with code, with HTML tags and text as much as you want!
    render(
        <div className="flex space-x-2">
            <Tag
                key="tag1"
                onDelete={() => alert('Would have deleted')}
            >
                Tag 1
            </Tag>
            <Tag
                key="tag2"
                onDelete={() => alert('Would have deleted')}
            >
                Tag 2
            </Tag>
            <Tag
                key="tag3"
                onDelete={() => alert('Would have deleted')}
            >
                Tag 3
            </Tag>
        </div>
    )

// You can play with code, with HTML tags and text as much as you want!
    render(
        <div className="flex space-x-2">
            <Tag
                key="tag1"
                onDelete={() => alert('Would have deleted')}
            >
                Tag 1
            </Tag>
            <Tag
                key="tag2"
                onDelete={() => alert('Would have deleted')}
            >
                Tag 2
            </Tag>
            <Tag
                key="tag3"
                onDelete={() => alert('Would have deleted')}
            >
                Tag 3
            </Tag>
        </div>
    )

Result

Types, definitions, etc.

Types
Changelog
Figma

TagProps

interface TagProps {
    onDelete?: () => void;
} & JSX.IntrinsicElements['button']

Name	Type	Default	Required	Description
onDelete	function	-	no	What to do when the user presses the X on the tag

Tag

Installation​

The Tag has necessary peerDependencies, please make sure that you have them in your project

Usage​

Types, definitions, etc.​

Change Log - @mercell/tag-react

5.0.0​

Breaking changes​

4.0.0​

Breaking changes​

3.0.6​

Patches​

3.0.5​

Patches​

3.0.4​

Patches​

3.0.3​

Patches​

3.0.2​

Patches​

3.0.1​

Patches​

3.0.0​

Breaking changes​

2.0.5​

Patches​

2.0.4​

Patches​

2.0.3​

Patches​

2.0.2​

Patches​

2.0.1​

Patches​

2.0.0​

Breaking changes​

1.0.6​

Patches​

1.0.5​

Patches​

1.0.4​

Patches​

1.0.3​

Patches​

1.0.2​

Patches​

1.0.1​

Patches​

1.0.0​

Breaking changes​

Installation

Usage

Types, definitions, etc.

5.0.0

Breaking changes

4.0.0

Breaking changes

3.0.6

Patches

3.0.5

Patches

3.0.4

Patches

3.0.3

Patches

3.0.2

Patches

3.0.1

Patches

3.0.0

Breaking changes

2.0.5

Patches

2.0.4

Patches

2.0.3

Patches

2.0.2

Patches

2.0.1

Patches

2.0.0

Breaking changes

1.0.6

Patches

1.0.5

Patches

1.0.4

Patches

1.0.3

Patches

1.0.2

Patches

1.0.1

Patches

1.0.0

Breaking changes