Badge

A small visual indicator for counts, status, or labels.

Features

• Multiple variants (solid, subtle, outline)
• Color themes (primary, success, warning, danger, info)
• Sizes (sm, md, lg)
• Dot variant
• Number formatting (99+)

Usage

Web (React)

import { Badge } from '@cuppa/ui'

<Badge>New</Badge>
<Badge variant="success">Active</Badge>
<Badge variant="danger">3</Badge>

iOS (SwiftUI)

import CuppaUI

CuppaBadge("New")
CuppaBadge("Active", variant: .success)
CuppaBadge("3", variant: .danger)

Android (Jetpack Compose)

import com.cuppa.ui.components.CuppaBadge

CuppaBadge("New")
CuppaBadge("Active", variant = BadgeVariant.Success)
CuppaBadge("3", variant = BadgeVariant.Danger)

Examples

With Icon

<Badge variant="primary">
  <StarIcon /> Featured
</Badge>

Notification Badge

<div style={{ position: 'relative' }}>
  <BellIcon />
  <Badge
    variant="danger"
    style={{ position: 'absolute', top: -5, right: -5 }}
  >
    12
  </Badge>
</div>

Dot Variant

<Badge variant="success" dot />