Presents users with short, relevant information.


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

import Badge from "@kiwicom/orbit-components/lib/Badge";

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



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

childrenReact.NodeThe content of the Badge.
dataTeststringOptional prop for testing purposes.
idstringSet id for Badge
iconReact.NodeThe displayed icon on the left.
typeenum"neutral"The color type of the Badge.
ariaLabelstringAdds prop adds aria-label to an element, useful for screenreaders.
borderbooleantrueShow or hide border around Badge
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



Functional specs

  • If you want to use circled badge, please take a look on NotificationBadge.