Developer mode
Opens components on the React tab by default.
Your bookmarks

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:



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



Functional specs

  • By passing the onRemove the close icon will appear on the left side of the Tag.