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





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