Tag
Offers a label that can optionally be selected and unselected or removed.
React
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>
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 |
| size |
|---|
"small" |
"normal" |
- By passing the
onRemovethe close icon will appear on the left side of the Tag.