Badge
A small status indicator for highlighting labels, states, and categories.
Badge is the React Native implementation shipped by the native-badge registry item. The component adapts the registry's web-facing composition to native primitives and touch-based interaction.
The native Badge component is a compact label for status, category, metadata, or short actions. It uses the same variant system as the web badge while rendering with React Native primitives.
A badge can be purely informational or interactive. When onPress is provided, the component exposes a button accessibility role and uses the configured press opacity.
See the shadcn/ui Badge documentation for the web component API, concepts, and additional examples.
Installation
CLI
npx shadcn add https://ui.tiesen.id.vn/r/native-badge.jsonManual
Copy and paste the following code into your project.
import type { VariantProps } from 'class-variance-authority'import { cva } from 'class-variance-authority'import { TouchableOpacity } from 'react-native'import { badgeVariants } from '@/components/ui/badge'import { cn } from '@/lib/utils'import { TypographyContext } from '@/components/native/typography'const badgeTextVariants = cva('text-xs font-medium whitespace-nowrap', { variants: { variant: { default: 'text-primary-foreground', secondary: 'text-secondary-foreground', success: 'text-success', destructive: 'text-destructive', info: 'text-info', warning: 'text-warning', outline: 'text-foreground', ghost: 'text-foreground', link: 'text-primary underline-offset-4 active:underline', }, }, defaultVariants: { variant: 'default', },})function Badge({ className, variant = 'default', activeOpacity = 0.8, disabled, ...props}: React.ComponentProps<typeof TouchableOpacity> & VariantProps<typeof badgeVariants>) { return ( <TypographyContext value={cn(badgeTextVariants({ variant }))}> <TouchableOpacity data-slot='badge' accessibilityRole={props.onPress ? 'button' : 'text'} data-variant={variant} aria-disabled={disabled} disabled={disabled} activeOpacity={props.onPress ? activeOpacity : 1} className={cn( badgeVariants({ variant }), 'h-6 flex-row rounded-md', disabled && 'opacity-50', className )} {...props} /> </TypographyContext> )}export { badgeVariants } from '@/components/ui/badge'export { Badge }Features
- Supports the shared shadcn badge variants.
- Can be used as a non-interactive label or as a pressable control.
- Automatically provides text styling to nested
Typographycontent. - Supports disabled state and custom press opacity.
- Accepts native
TouchableOpacityprops.
Registry dependencies: This component depends on the web
badgeregistry component andnative-typography.
Usage
import { Badge } from '@/components/native/badge'
export function BadgeExample() {
return (
<Badge variant='success'>
Verified
</Badge>
)
}Variants
The component supports the variants provided by the web badge styles:
<Badge>Default</Badge>
<Badge variant='secondary'>Secondary</Badge>
<Badge variant='success'>Success</Badge>
<Badge variant='destructive'>Destructive</Badge>
<Badge variant='info'>Info</Badge>
<Badge variant='warning'>Warning</Badge>
<Badge variant='outline'>Outline</Badge>
<Badge variant='ghost'>Ghost</Badge>
<Badge variant='link'>Link</Badge>Interactive badges
Pass onPress when the badge should behave as a compact action.
<Badge
variant='outline'
onPress={() => console.log('pressed')}
>
View details
</Badge>Without onPress, the badge exposes a text accessibility role and does not apply the interactive opacity behavior.
API Reference
Badge
| Prop | Type | Default |
|---|---|---|
variant | "default" | "secondary" | "success" | "destructive" | "info" | "warning" | "outline" | "ghost" | "link" | "default" |
activeOpacity | number | 0.8 |
disabled | boolean | — |
onPress | TouchableOpacityProps['onPress'] | — |
className | string | — |
...props | React.ComponentProps<typeof TouchableOpacity> | — |
All remaining props are forwarded to the underlying TouchableOpacity.