A basic type that allows you to choose colors to fit any need.


To implement BadgePrimitive component into your project you’ll need to add the import:

import BadgePrimitive from "@kiwicom/orbit-components/lib/primitives/BadgePrimitive";

After adding import into your project you can use it simply like:



Table below contains all types of the props available in BadgePrimitive component.

backgroundstringBackground of a BadgePrimitive. Can use gradients and images
borderColorstringColor of the border that is always solid and one pixel.
foregroundColorstringForeground color, controling color of a text and icon.
childrenReact.NodeThe content of the BadgePrimitive.
dataTeststringOptional prop for testing purposes.
idstringSet id for BadgePrimitive
iconReact.NodeThe displayed icon on the left.
ariaLabelstringAdds prop adds aria-label to an element, useful for screenreaders.
carriersCarrier[]The content of the CarrierLogo, passed as array of objects.


Table below contains all types of the props available for object in Carrier array.

codestringThe code of the Carrier, defines which logo will be rendered.
namestringThe name of the Carrier, mainly for information.
typeenumThe preferred placeholder for non-existing carrier. See Functional specs