Badge
Types Primitives
Slot Primitives
Demo
Shows a badge or a badge-like component.
Installation
npx @react-native-reusables/cli@latest add badgeCopy/paste the following code to ~/components/ui/badge.tsx
import * as Slot from '@rn-primitives/slot';import type { SlottableViewProps } from '@rn-primitives/types';import { cva, type VariantProps } from 'class-variance-authority';import { View } from 'react-native';import { cn } from '~/lib/utils';import { TextClassContext } from '~/components/ui/text';
const badgeVariants = cva( 'web:inline-flex items-center rounded-full border border-border px-2.5 py-0.5 web:transition-colors web:focus:outline-none web:focus:ring-2 web:focus:ring-ring web:focus:ring-offset-2', { variants: { variant: { default: 'border-transparent bg-primary web:hover:opacity-80 active:opacity-80', secondary: 'border-transparent bg-secondary web:hover:opacity-80 active:opacity-80', destructive: 'border-transparent bg-destructive web:hover:opacity-80 active:opacity-80', outline: 'text-foreground', }, }, defaultVariants: { variant: 'default', }, });
const badgeTextVariants = cva('text-xs font-semibold ', { variants: { variant: { default: 'text-primary-foreground', secondary: 'text-secondary-foreground', destructive: 'text-destructive-foreground', outline: 'text-foreground', }, }, defaultVariants: { variant: 'default', },});
type BadgeProps = SlottableViewProps & VariantProps<typeof badgeVariants>;
function Badge({ className, variant, asChild, ...props }: BadgeProps) { const Component = asChild ? Slot.View : View; return ( <TextClassContext.Provider value={badgeTextVariants({ variant })}> <Component className={cn(badgeVariants({ variant }), className)} {...props} /> </TextClassContext.Provider> );}
export { Badge, badgeTextVariants, badgeVariants };export type { BadgeProps };Usage
import { Badge } from '~/components/ui/badge';import { Text } from '~/components/ui/text';
function Example() { return ( <Badge> <Text>Default</Text> </Badge> );}Props
Badge
Extends View props
| Prop | Type | Note |
|---|---|---|
| asChild | boolean | (optional) |
| variant | ’default’ | ‘secondary’ | ‘destructive’ | ‘outline’ | (optional) |