@lightspeed/cirrus-tag

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