Introduction
Components
- Accordion
- Action Sheet
- Alert
- Audio Player
- Audio Recorder
- Audio Waveform
- Avatar
- AvoidKeyboard
- Badge
- BottomSheet
- Button
- Camera
- Camera Preview
- Card
- Carousel
- Checkbox
- Collapsible
- Color Picker
- Combobox
- Date Picker
- File Picker
- Gallery
- Hello Wave
- Icon
- Image
- Input
- Input OTP
- Link
- MediaPicker
- Mode Toggle
- Onboarding
- ParallaxScrollView
- Picker
- Popover
- Progress
- Radio
- ScrollView
- SearchBar
- Separator
- Share
- Sheet
- Skeleton
- Spinner
- Switch
- Table
- Tabs
- Text
- Toast
- Toggle
- Video
- View
Charts
Installation
pnpm dlx bna-ui add badge
Usage
import { Badge } from '@/components/ui/badge';<Badge>Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="destructive">Destructive</Badge>
<Badge variant="outline">Outline</Badge>
<Badge variant="success">Success</Badge>Examples
Default
With Icons
Notification Badges
Custom Styling
Interactive Badges
Sizes
Status Indicators
API Reference
Badge
A versatile badge component for displaying status, categories, or notifications.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | The content to display inside the badge. |
variant | 'default' | 'secondary' | 'destructive' | 'outline' | 'success' | 'default' | The visual style variant of the badge. |
style | ViewStyle | - | Additional styles to apply to the badge. |
textStyle | TextStyle | - | Additional styles to apply to the badge text. |
Accessibility
The Badge component is built with accessibility in mind:
- Uses semantic structure for screen readers
- Proper contrast ratios for all variants
- Supports dynamic text sizing
- Clear visual distinction between different states