README.md

Badge

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:

<Badge>Hello!</Badge>

Props

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

Name	Type	Default	Description
children	React.Node		The content of the Badge.
dataTest	string		Optional prop for testing purposes.
id	string		Set id for Badge
icon	React.Node		The displayed icon on the left.
type	enum	"neutral"	The color type of the Badge.
ariaLabel	string		Adds prop adds aria-label to an element, useful for screenreaders.
border	boolean	true	Show or hide border around Badge
carriers	Carrier[]		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.

Name	Type	Description
code	string	The code of the Carrier, defines which logo will be rendered.
name	string	The name of the Carrier, mainly for information.
type	enum	The 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.