Tag / React
Offers a label that can optionally be selected and unselected or removed.
To implement Tag component into your project you’ll need to add the import:
import Tag from "@kiwicom/orbit-components/lib/Tag";
After adding import into your project you can use it simply like:
<Tag>Hello!</Tag>
Props
Table below contains all types of the props available in the Tag component.
Name | Type | Default | Description |
---|---|---|---|
children | React.Node |
The content of the Tag. | |
dataTest | string |
Optional prop for testing purposes. | |
onClick | () => void | Promise |
Function for handling the onClick event. | |
onRemove | () => void | Promise |
Function for handling the onClick event of the close icon. See Functional specs | |
selected | boolean |
false |
If true , the Tag will have selected styles. See Functional specs |
size | enum |
small |
Size of the Tag. |
ref | func |
Prop for forwarded ref of the Tag |
enum
size |
---|
"small" |
"normal" |
Functional specs
- By passing the
onRemove
the close icon will appear on the left side of the Tag.