Badge

The Open UI Kit Badge displays compact counts, labels, and status indicators with the product color system.

Introduction

Badge is for small pieces of information that need to sit close to another element: counts, statuses, severity markers, and notification indicators. Use it when the value is short and useful at a glance.

Import

import { Badge } from '@open-ui-kit/core';

When to use

Use Badge for compact counts, notification dots, and small state markers attached to another element. It works best when the badge changes how the user understands or prioritizes the anchor element.

Use text, chips, or status rows instead when the state needs explanation.

Anatomy

A badge has an anchor element and a marker. The marker can be numeric, dot-only, or status-like depending on the use case. Keep badge content short so it does not compete with the element it annotates.

Types

Use type to map the badge to a product meaning. Open UI Kit includes neutral, success, error, warning, severity, and inactive treatments.

Notification badge

Pass notificationContent when the badge should sit on top of another element. The original content becomes the wrapped child, and notificationContent becomes the small badge value.

Custom styles

Use styleBadge for the badge container and styleContent for the text inside it. Keep overrides small so the badge stays aligned with the design system.

Behavior notes

Use counts when the number itself matters, such as unread items or pending tasks. Use a dot when the presence of new activity is enough. Cap or format large counts in the page logic before passing the value to the badge.

Props

Badge types

type BadgeType =
  | 'default'
  | 'excellent'
  | 'neutral'
  | 'error'
  | 'warning'
  | 'info'
  | 'success'
  | 'inactive'
  | 'moderate'
  | 'severe';

Accessibility

Badges are compact visual hints, so avoid relying on color alone for critical information. When a badge represents a status, pair it with nearby text that names the state. For notification badges on icons, make sure the icon or surrounding control has an accessible label.

Usage guidance

• Keep badge content short: one word, a number, or a compact code.
• Use notification mode for icon counters and standalone mode for status pills.
• Use inactive for disabled, muted, or unavailable states.
• Use warning, moderate, and severe only when the distinction matters to the user.