Badge

Badge displays compact status labels, count indicators, and category tags supporting 6 style variants, component tones, size scaling, and icon prefixes.

Usage

BadgeExample.tsx

import React from 'react';
import { Badge, Box } from '@masumdev/rn-ui';
import { Sparkles, ShieldCheck, Flame } from 'lucide-react-native';

export function BadgeExample() {
  return (
    <Box gap="md">
      {/* Variants Showcase */}
      <Box row gap="sm">
        <Badge tone="primary" variant="solid">Solid</Badge>
        <Badge tone="primary" variant="soft">Soft</Badge>
        <Badge tone="primary" variant="outline">Outline</Badge>
        <Badge tone="primary" variant="subtle">Subtle</Badge>
        <Badge tone="primary" variant="ghost">Ghost</Badge>
        <Badge tone="primary" glass>Glass</Badge>
      </Box>

      {/* Tones with Icons */}
      <Box row gap="sm">
        <Badge tone="primary" variant="solid" icon={({ color, size }) => <Sparkles color={color} size={size} />}>
          Featured
        </Badge>
        <Badge tone="success" variant="soft" icon={({ color, size }) => <ShieldCheck color={color} size={size} />}>
          Verified
        </Badge>
        <Badge tone="danger" variant="solid" icon={({ color, size }) => <Flame color={color} size={size} />}>
          Hot Deal
        </Badge>
      </Box>

      {/* Sizes Scale */}
      <Box row gap="sm">
        <Badge size="sm" tone="primary">Small (sm)</Badge>
        <Badge size="md" tone="primary">Medium (md)</Badge>
        <Badge size="lg" tone="primary">Large (lg)</Badge>
      </Box>
    </Box>
  );
}

Props API

Prop	Type	Default	Description
children	string	—	Badge label text string.
variant	'solid' | 'soft' | 'outline' | 'subtle' | 'ghost'	'soft'	Visual style variant.
tone	'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'danger' | 'info'	'primary'	Color tone styling.
size	'sm' | 'md' | 'lg'	'md'	Size scale (sm, md, lg).
glass	boolean	false	Enables translucent frosted glass background styling.
icon	RenderIcon	—	Optional icon prefix render function.