NotificationBadge

Interfaces with too many choices and too much information pulling users in different directions often end up with users not completing any action.

When you have simple information like the type of transportation for part of a journey and users don’t need to interact with it, present it simply with a notification badge.

Component status

Figma

Designing

Web (React)

Released

iOS (Swift)

n/a

Android (Kotlin)

n/a

Docs

Released

Content structure

Guidelines

Prefer inverted critical for notifications

Generally, notification badges are used to draw attention to something to be done. They’re not an action themselves, so we avoid interactive and actionable colors. It’s best to use inverted critical badges unless you have a specific reason not to.

import NotificationBadge from "@kiwicom/orbit-components/lib/NotificationBadge";

() => <NotificationBadge type="criticalInverted">3</NotificationBadge>

Limit content

Notification badges are very small and circular. This means they can’t hold much content. Use only an icon or a number no more than 2 digits.

Include nonvisual info

When you’re using only an icon for the notification badge, make sure to include the same information nonvisually so even people who won’t see the icon get the same message.

import NotificationBadge from "@kiwicom/orbit-components/lib/NotificationBadge";
import Train from "@kiwicom/orbit-components/lib/icons/Train";

() => <NotificationBadge ariaLabel="Train" icon={<Train />} />

Badge types 

There are six basic types of badges. Info and critical badges have an inverted variant for use with different backgrounds. You should default to using inverted critical badges.

import NotificationBadge from "@kiwicom/orbit-components/lib/NotificationBadge";
import Stack from "@kiwicom/orbit-components/lib/Stack";

() => (
  <Stack direction="column">
    <Stack flex>
      <NotificationBadge type="critical">3</NotificationBadge>
      <NotificationBadge type="criticalInverted">3</NotificationBadge>
    </Stack>
    <Stack flex>
      <NotificationBadge type="info">3</NotificationBadge>
      <NotificationBadge type="infoInverted">3</NotificationBadge>
    </Stack>
    <Stack flex>
      <NotificationBadge type="neutral">3</NotificationBadge>
      <NotificationBadge type="dark">3</NotificationBadge>
    </Stack>
    <Stack flex>
      <NotificationBadge type="success">3</NotificationBadge>
      <NotificationBadge type="warning">3</NotificationBadge>
    </Stack>
  </Stack>
)

Related components

Badge

Notification badges are only for icons or short numbers. For slightly longer content, use a badge.

Button

Notification badges draw attention to actions to be taken, but are not themselves actionable. If you want to offer an action, use a button (a circled button has a similar look with an action).