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 IATA 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
circledbadge, please take a look on NotificationBadge.