Tag

Offers a label that can optionally be selected and unselected or removed.

Tag

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.

NameTypeDefaultDescription
childrenReact.NodeThe content of the Tag.
dataTeststringOptional prop for testing purposes.
iconLeftReact.NodeThe displayed icon on the left.
idstringSet id for Tag
dateTagstringOptional prop, if it’s true, selected color has ink background
typeenumneutralThe color type of the Tag.
onClick() => void \| PromiseFunction for handling the onClick event.
onRemove() => void \| PromiseFunction for handling the onClick event of the close icon. See Functional specs
selectedbooleanfalseIf true, the Tag will have selected styles. See Functional specs
sizeenumsmallSize of the Tag.
reffuncProp for forwarded ref of the Tag

enum

sizetype
"small""neutral"
"normal""colored"

Functional specs

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