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
onRemovethe close icon will appear on the left side of the Tag.