Developer mode
Opens components on the React tab by default.
Your bookmarks

Badge

Presents users with short, relevant information.

When you have a complex UI, users can sometimes struggle to find the information relevant to them. Use badges to call attention to details in a way that makes it easy to scan.

Badges should only present information, such as statuses, but not have any interactions. If you want badge-like components you can remove, consider using tags. If you want an action associated with the message, use an alert with a status button inside. If you want a circled badge for notifications, use a notification badge.

Component status

Figma
Released
Web (React)
Released
iOS (Swift)
n/a
Android (Kotlin)
n/a
Sketch
Released

Content structure

Label: works best when short; icon: supports the label.

Guidelines

Keep it short

Badges are small and can’t contain much information. They’re great for indicating status or how much of something is selected. But you can’t fit a lot into that space.

If you have more information to display, use another component. To keep the UI uncluttered, you can choose one that supports progressive disclosure, such as a tooltip. This can wrap text or even a badge.

  # Keep badges short

Use progressive disclosure for other information.

A badge with an icon of passengers and the number 4 and a tooltip saying 2 adults and 2 children.
A badge with an icon of passengers and the number 4 and the text 2 adults and 2 children.

Display static info

Badges are indicators of static information. They can be updated when a status changes, but they should not be actionable. 

When you have extra information to display, it’s possible to include a simple interaction, such as displaying a tooltip on hover. When doing so, make sure it’s clear that the interaction is there.

  # Don’t combine with text link

If you’d like to have an action, consider an alert or a button instead.

An alert with the message
A badge with the text: Booking failed. Get details. The second sentence is a link.

Support with icons

With such small space to convey a message, visual cues can help users understand the idea more quickly. Use icons to display more information in a smaller size, such as what form of transport is included.

The badge can be only an icon. Just be sure to keep it accessible by giving it a label for people who won’t see the icon.

  # Use icons only on left

Icons connected to the badge meaning should be displayed on the left. 

A badge with an icon of passengers on the left of the number 4.
A badge with the number 4 and to the right an icon of passengers.

Use icons on the right only when that icon relates to there being further explanation of the label (such as to signal there’s a tooltip).

import Badge from "@kiwicom/orbit-components/lib/Badge";
import InformationCircle from "@kiwicom/orbit-components/lib/icons/InformationCircle";
import Tooltip from "@kiwicom/orbit-components/lib/Tooltip";
<Tooltip content="Get more points by traveling more">
  <Badge type="neutral">
    2,435 pts <InformationCircle size="small" ariaLabel="More information" />
  </Badge>
</Tooltip>

Badge types

There are six basic types of badges. All except white badges have an inverted variant for use with different backgrounds.

Neutral badges

Neutral badges present information without adding any emotion. They’re useful when the information is not so important to the user’s main flow.

import Badge from "@kiwicom/orbit-components/lib/Badge";
import Stack from "@kiwicom/orbit-components/lib/Stack";
import Train from "@kiwicom/orbit-components/lib/icons/Train";
() => (
  <Stack flex>
    <Badge type="neutral" ariaLabel="Train" icon={<Train />} />
    <Badge type="dark" ariaLabel="Train" icon={<Train />} />
  </Stack>
)

White badges

White badges are useful when presenting neutral information within a dark context.

import Badge from "@kiwicom/orbit-components/lib/Badge";
import PictureCard from "@kiwicom/orbit-components/lib/PictureCard";
import Passengers from "@kiwicom/orbit-components/lib/icons/Passengers";
() => (
  <PictureCard
    image={{
      code: "moscow_ru",
      name: "moscow_ru",
      original: "385x320",
      placeholder: "385x320",
    }}
    height="300px"
    width="400px"
  >
    <Badge type="white" icon={<Passengers />} ariaLabel="4 passengers">
      4
    </Badge>
  </PictureCard>
)

Info badges

Informational badges help to highlight some information as particularly important. They draw attention to the badge without stating whether it was positive or a potential problem.

import Badge from "@kiwicom/orbit-components/lib/Badge";
import Stack from "@kiwicom/orbit-components/lib/Stack";
import Train from "@kiwicom/orbit-components/lib/icons/Train";
() => (
  <Stack flex>
    <Badge type="info" ariaLabel="Train" icon={<Train />} />
    <Badge type="infoInverted" ariaLabel="Train" icon={<Train />} />
  </Stack>
)

Success badges

Success badges help to highlight something desirable has happened or will happen. You can use them in situations like a confirmation of a user action (such as booking a trip) or potentially attractive options (such as free baggage).

import Badge from "@kiwicom/orbit-components/lib/Badge";
import Stack from "@kiwicom/orbit-components/lib/Stack";
() => (
  <Stack flex>
    <Badge type="success" icon={<Check ariaLabel="Success" />}>
      Included in price
    </Badge>
    <Badge type="successInverted" icon={<Check ariaLabel="Success" />}>
      Included in price
    </Badge>
  </Stack>
)

Warning badges

Warning badges highlight information that might have a negative impact on the user but isn’t critical. They are associated with negative emotions so only use them occasionally to stop potential problems before they happen.

import Badge from "@kiwicom/orbit-components/lib/Badge";
import Stack from "@kiwicom/orbit-components/lib/Stack";
() => (
  <Stack flex>
    <Badge type="warning" icon={<Alert ariaLabel="Warning" />}>
      Not yet confirmed
    </Badge>
    <Badge type="warningInverted" icon={<Alert ariaLabel="Warning" />}>
      Not yet confirmed
    </Badge>
  </Stack>
)

Critical badges

Critical badges call attention to problems that require immediate attention from the user. These badges create feelings of stress so only use them for issues where they’re truly necessary.

import Badge from "@kiwicom/orbit-components/lib/Badge";
import Stack from "@kiwicom/orbit-components/lib/Stack";
() => (
  <Stack flex>
    <Badge
      type="critical"
      icon={<AlertCircle ariaLabel="Critical alert" />}
    >
      No connection to internet
    </Badge>
    <Badge
      type="criticalInverted"
      icon={<AlertCircle ariaLabel="Critical alert" />}
    >
      No connection to internet
    </Badge>
  </Stack>
)

Related components

NotificationBadge

Badges work with with different kinds of simple content. If you want a circled badge, useful for displaying how many notifications a user has, use a notification badge.

Tag

Badges should be static. If you’d like components that users can add and remove (such as in a filter for searching for destinations), use a tag component.

Alert

Badges communicate messages without any follow-up actions. If you want to have a message with an associated action, use an alert.

Button

Badges should not have any actions associated with them. If you want to offer an action in a simple component, consider a button.