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 |