Badge

Badge

import Badge from "@kiwicom/orbit-components/lib/Badge";
<Badge>Hello!</Badge>

Props

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

Carrier

NameTypeDescription
codestringThe IATA 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

enum

type
"neutral"
"dark"
"info"
"success"
"warning"
"critical"
"infoSubtle"
"criticalSubtle"
"successSubtle"
"warningSubtle"
"bundleBasic"
"bundleMedium"
"bundleTop"

Functional specs

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