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:

<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.
icon React.Node The displayed icon on the left.

enum

size
"small"
"normal"

Functional specs

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