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:



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. See Functional specs
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.



Functional specs

  • The circled property is meant to be used only for two characters. Don't combine it with any icon or children.