Badge Component

Installation

The Badge component is used to highlight and display status, labels, or counts.

Installation Command

npx @nativecn/cli add badge

Basic Variants

Badge Variants

Default

Secondary

Destructive

Outline

Interactive Badges

Interactive Default

Interactive Secondary

Interactive Destructive

Interactive Outline

Custom Styling

Custom Styled Badges

Custom Background

Custom Text Color

Custom Border

Usage Example

Basic Badge Usage with Responsive Mode

import { Badge } from '../components/ui/badge';
import { useColorScheme } from 'react-native';

export function NotificationBadge({ count }) {
  const colorScheme = useColorScheme();
  
  return (
    <Badge 
      mode={colorScheme} // 'light' or 'dark' based on system preference
      variant="destructive"
      interactive
    >
      {count}
    </Badge>
  );
}

Reference

Badge Props

interface BadgeProps extends Omit<TouchableOpacityProps, 'style'> {
  variant?: 'default' | 'secondary' | 'destructive' | 'outline';
  className?: string;
  textClassName?: string;
  style?: StyleProp<ViewStyle>;
  textStyle?: StyleProp<TextStyle>;
  mode?: 'light' | 'dark';  // Controls light/dark appearance
  children: React.ReactNode;
  interactive?: boolean;  // Makes the badge clickable
}

Avatar Breadcrumb