@lightspeed/cirrus-tag NPM

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>