Badge

We use badges when we need to inform our users about relevant information, e.g., booking status. The badge is not clickable.



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
circled boolean false If true, the Badge will have circular shape.
children React.Node The content of the Badge.
dataTest string Optional prop for testing purposes.
icon React.Node The displayed icon on the left.
type enum "neutral" The color type of the Badge.

enum

type
"neutral"
"dark"
"info"
"success"
"warning"
"critical"

 

Basic badges

Notification badges

Emoji badges (experimental)