BadgePrimitive

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

BadgePrimitive

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:

<BadgePrimitive>Hello!</BadgePrimitive>

Props

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

NameTypeDefaultDescription
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.

Carrier

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

NameTypeDescription
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