Badge
A versatile badge component for displaying status, labels, and notifications with multiple variants and sizes.
Installation
Install the component:
npx natively-ui add badgeUsage
BadgeDemo.jsx
1import { Badge } from '@/components/ui/badge';
2
3export default function MyComponent() {
4 return (
5 <Badge
6 variant="default"
7 size="default"
8 >
9 New
10 </Badge>
11 );
12}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | - | The content to display inside the badge. |
| variant | 'default' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning' | 'default' | The visual style variant of the badge. |
| size | 'default' | 'sm' | 'lg' | 'default' | The size of the badge. |
| icon | React.ReactNode | - | Optional icon to display before the badge text. |
| className | string | "" | Additional CSS classes for the badge container. |
| textClassName | string | "" | Additional CSS classes for the badge text. |
Features
- Six visual variants (default, secondary, destructive, outline, success, warning)
- Three size options (default, sm, lg)
- Icon support with automatic spacing
- Semantic color coding for different states
- Self-adjusting width based on content
- Customizable styling with className props
- Accessible text contrast ratios
- Built with Tailwind CSS and React Native
Examples
Basic Usage
BadgeDemo.jsx
1<Badge>New</Badge>Variants
BadgeDemo.jsx
1<View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
2 <Badge variant="default">Default</Badge>
3 <Badge variant="secondary">Secondary</Badge>
4 <Badge variant="destructive">Destructive</Badge>
5 <Badge variant="outline">Outline</Badge>
6 <Badge variant="success">Success</Badge>
7 <Badge variant="warning">Warning</Badge>
8</View>Sizes
BadgeDemo.jsx
1<View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
2 <Badge size="sm">Small</Badge>
3 <Badge size="default">Default</Badge>
4 <Badge size="lg">Large</Badge>
5</View>With Icons
BadgeDemo.jsx
1<View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
2 <Badge
3 variant="success"
4 icon={<Icon name="check" size={12} />}
5 >
6 Completed
7 </Badge>
8
9 <Badge
10 variant="warning"
11 icon={<Icon name="alert-triangle" size={12} />}
12 >
13 Warning
14 </Badge>
15
16 <Badge
17 variant="destructive"
18 icon={<Icon name="x" size={12} />}
19 >
20 Error
21 </Badge>
22
23 <Badge
24 variant="default"
25 icon={<Icon name="star" size={12} />}
26 >
27 Featured
28 </Badge>
29</View>Status Indicators
BadgeDemo.jsx
1<View style={{ gap: 12 }}>
2 <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
3 <Text>Order Status:</Text>
4 <Badge variant="success">Delivered</Badge>
5 </View>
6
7 <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
8 <Text>Payment Status:</Text>
9 <Badge variant="warning">Pending</Badge>
10 </View>
11
12 <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
13 <Text>Server Status:</Text>
14 <Badge variant="destructive">Offline</Badge>
15 </View>
16
17 <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
18 <Text>Account Type:</Text>
19 <Badge variant="outline">Free</Badge>
20 </View>
21</View>Notification Badges
BadgeDemo.jsx
1<View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 12 }}>
2 <Badge variant="destructive" size="sm">3</Badge>
3 <Badge variant="warning" size="sm">12</Badge>
4 <Badge variant="success" size="sm">99+</Badge>
5 <Badge variant="default" size="sm">New</Badge>
6</View>Category Tags
BadgeDemo.jsx
1<View style={{ gap: 16 }}>
2 <View>
3 <Text style={{ fontSize: 18, fontWeight: 'bold', marginBottom: 8 }}>
4 React Native Best Practices
5 </Text>
6 <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 6 }}>
7 <Badge variant="default" size="sm">React Native</Badge>
8 <Badge variant="secondary" size="sm">JavaScript</Badge>
9 <Badge variant="outline" size="sm">Mobile</Badge>
10 <Badge variant="success" size="sm">Tutorial</Badge>
11 </View>
12 </View>
13
14 <View>
15 <Text style={{ fontSize: 18, fontWeight: 'bold', marginBottom: 8 }}>
16 Advanced TypeScript Guide
17 </Text>
18 <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 6 }}>
19 <Badge variant="warning" size="sm">TypeScript</Badge>
20 <Badge variant="default" size="sm">Advanced</Badge>
21 <Badge variant="outline" size="sm">Web Dev</Badge>
22 </View>
23 </View>
24</View>Custom Styling
BadgeDemo.jsx
1<View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
2 {/* Custom background gradient */}
3 <Badge
4 className="bg-gradient-to-r from-purple-500 to-pink-500"
5 textClassName="text-white font-bold"
6 >
7 Premium
8 </Badge>
9
10 {/* Custom border and shadow */}
11 <Badge
12 variant="outline"
13 className="border-2 border-blue-500 shadow-md"
14 textClassName="text-blue-600 font-semibold"
15 >
16 Featured
17 </Badge>
18
19 {/* Custom size and padding */}
20 <Badge
21 variant="success"
22 className="px-4 py-2 rounded-full"
23 textClassName="text-sm"
24 >
25 Verified
26 </Badge>
27</View>Interactive Usage
BadgeDemo.jsx
1const [filter, setFilter] = useState('all');
2
3const filters = [
4 { id: 'all', label: 'All', variant: 'outline' },
5 { id: 'active', label: 'Active', variant: 'success' },
6 { id: 'pending', label: 'Pending', variant: 'warning' },
7 { id: 'inactive', label: 'Inactive', variant: 'destructive' },
8];
9
10<View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
11 {filters.map(filterItem => (
12 <TouchableOpacity
13 key={filterItem.id}
14 onPress={() => setFilter(filterItem.id)}
15 >
16 <Badge
17 variant={filter === filterItem.id ? filterItem.variant : 'outline'}
18 className={filter === filterItem.id ? '' : 'opacity-60'}
19 >
20 {filterItem.label}
21 </Badge>
22 </TouchableOpacity>
23 ))}
24</View>