@sb/badge

A versatile and accessible Badge component for React web and React Native applications. Part of the sports-betting-monorepo UI library.

Installation

npm install @sb/badge

Features

• 🎨 Multiple variants: solid, outline, ghost
• 📐 Three size options: small, medium, large
• 🌈 Predefined semantic colors: primary, secondary, danger, success, warning
• 🎯 Custom color support (hex, rgb, etc.)
• 💊 Pill-shaped and Circular options
• 🚀 Integrated Tooltip support
• ✨ Cross-platform: Works on Web and React Native
• 🔧 Customizable via className and style props

Basic Usage

Web

import { Badge } from '@sb/badge';

function App() {
  return (
    <Badge 
      id="new-badge"
      text="New" 
      color="success"
      pill 
    />
  );
}

React Native

import { Badge } from '@sb/badge';

function MyScreen() {
  return (
    <Badge 
      text="Active" 
      color="primary"
      variant="outline"
    />
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | id | string | required | Unique identifier | | text | string \| ReactNode | required | Badge content | | variant | 'solid' \| 'outline' \| 'ghost' | 'solid' | Visual style | | size | 'small' \| 'medium' \| 'large' | 'medium' | Badge size | | color | BadgeColor \| string | 'primary' | Semantic color or custom value | | pill | boolean | false | Pill-shaped (rounded-full) | | circular | boolean | false | Perfect circle shape | | icon | boolean | false | Show an icon | | iconValue | ReactNode | - | Icon element | | tooltipContent | string \| ReactNode | - | Content for integrated tooltip | | className | string | - | Additional CSS classes (Web) | | textClassName | string | - | Additional text CSS classes (Web) |

Documentation

• DEVELOPMENT.md - Contributor guide
• PUBLISH_GUIDE.md - Publishing instructions
• EXAMPLE.md - More examples

License

MIT