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

Choose type based on urgency

We have two types of notification badges with different backgrounds: info (Blue / Light) and critical (Red / Light). They each express a different feel, so choose a color based on how urgent the notification is.

• Info: Subtle, useful for counters. Use when you just want to show users that there is something to see but action isn’t necessary (such as a wish list).
• Critical: Grabs attention. Use when the notification requires real action from the user.

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 />} type="info" />
)

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).