@shared-solid/badge

Framework-agnostic Badge component for React, SolidJS, and Remix.

Installation

npm install @shared-solid/badge
# or
yarn add @shared-solid/badge
# or
pnpm add @shared-solid/badge

Usage

React

import { ReactBadge } from '@shared-solid/badge/react';
import '@shared-solid/badge/style.css';

function App() {
  return (
    <div>
      <ReactBadge variant="success">Completed</ReactBadge>
      <ReactBadge variant="warning" rounded>3</ReactBadge>
      <ReactBadge variant="error" size="lg">Error</ReactBadge>
      <ReactBadge variant="info">New</ReactBadge>
    </div>
  );
}

SolidJS

import { Badge } from '@shared-solid/badge/solid';
import '@shared-solid/badge/style.css';

function App() {
  return (
    <div>
      <Badge variant="success">Completed</Badge>
      <Badge variant="warning" rounded>3</Badge>
      <Badge variant="error" size="lg">Error</Badge>
      <Badge variant="info">New</Badge>
    </div>
  );
}

Props

• variant: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' (default: 'primary')
• size: 'sm' | 'md' | 'lg' (default: 'md')
• rounded: boolean (default: false)
• children: ReactNode - Badge content (required)
• class: string - Additional CSS classes

Bundle Optimization

🚀 Optimized for production:

• React bundle: ~0.6KB JS + ~2.3KB CSS
• SolidJS bundle: ~9.5KB JS + ~2.3KB CSS
• Tree-shakable: Only load what you need
• Minified: Production-ready builds

CSS Files

• style.css - Badge styles (works for both React and SolidJS)

Examples

Status Badges

<ReactBadge variant="success">Active</ReactBadge>
<ReactBadge variant="error">Failed</ReactBadge>
<ReactBadge variant="warning">Warning</ReactBadge>
<ReactBadge variant="info">Info</ReactBadge>

Size Variants

<ReactBadge variant="primary" size="sm">Small</ReactBadge>
<ReactBadge variant="primary" size="md">Medium</ReactBadge>
<ReactBadge variant="primary" size="lg">Large</ReactBadge>

Rounded Badges

<ReactBadge variant="primary" rounded>1</ReactBadge>
<ReactBadge variant="success" rounded>99+</ReactBadge>
<ReactBadge variant="error" rounded>!</ReactBadge>

Notification Badges

<ReactBadge variant="error">3</ReactBadge>
<ReactBadge variant="warning">12</ReactBadge>
<ReactBadge variant="success">✓</ReactBadge>