Tag

Tag component.

Installation

First, make sure you have been through the Getting Started steps of adding Cirrus in your application.

If using Yarn:

yarn add @lightspeed/cirrus-tag

Or using npm:

npm i -S @lightspeed/cirrus-tag

Usage

Import required styles in your .scss:

@import '@lightspeed/cirrus-tag/Tag.scss';

React Component

<Tag />

| Prop | Type | Default | Description | | --------------- | ------------------| ------------- | ------------ | | children | node | required | Tag content | | size | normal, small | normal | Tag size | | onClick | function | () => {} | Handler called when clicking the Tag | | onRemove | function | () => {} | Handler that enables the dismissible functionality and is called when clicking the remove button of the Tag | | [property] | any | any | Any extra properties passed will be added to the Tag component |

<TagLabel />

| Prop | Type | Default | Description | | --------------- | ------------------| ------------- | ------------ | | children | node | required | TagLabel content | | size | normal, small | normal | TagLabel size | | onClick | function | () => {} | Handler called when clicking the TagLabel | | [property] | any | any | Any extra properties passed will be added to the TagLabel component |

<TagRemove />

| Prop | Type | Default | Description | | --------------- | ------------------| ------------- | ------------ | | onClick | function | () => {} | Handler called when clicking the TagRemove | | [property] | any | any | Any extra properties passed will be added to the TagRemove component |

Example

See the examples folder for this component.

HTML Component

<div class="cr-tag" role="button" tabIndex="0">
  <div class="cr-tag__label cr-tag__label--small">Tag</div>
  <div class="cr-tag__remove" role="button" tabIndex="0">x</div>
</div>

Classes

| Type | Class | | ---- | ----- | | base | .cr-tag | | label | .cr-tag__label | | label small | .cr-tag__label--small | | label normal | .cr-tag__label--normal | | remove | .cr-tag__remove |