import React, { createContext, useContext, useMemo } from 'react'; import { View } from 'react-native'; import { StyleSheet } from 'react-native-unistyles'; import { Icon, IconProps } from '@/registry/ui/icon'; import { Text, TextProps } from '@/registry/ui/text'; import { Color } from '@/styles/tokens/colors'; type BadgeVariant = | 'primary' | 'secondary' | 'destructive' | 'success' | 'outline'; type BadgeContextType = { variant: BadgeVariant; }; const BadgeContext = createContext(null); const useBadge = () => { const ctx = useContext(BadgeContext); if (!ctx) { throw new Error('useBadge must be used within a '); } return ctx; }; type BadgeProps = React.ComponentPropsWithRef & { variant?: BadgeVariant; iconOnly?: boolean; }; function Badge({ variant = 'primary', iconOnly = false, style, ...restProps }: BadgeProps) { styles.useVariants({ variant, }); const contextValue = useMemo(() => { return { variant, }; }, [variant]); return ( ); } const fgColorMap: Record, Color> = { primary: 'primaryForeground', secondary: 'secondaryForeground', destructive: 'destructiveForeground', success: 'successForeground', outline: 'secondaryForeground', }; function BadgeText(props: TextProps) { const { variant } = useBadge(); return ; } Badge.Text = BadgeText; function BadgeIcon(props: IconProps) { const { variant } = useBadge(); return ; } Badge.Icon = BadgeIcon; const styles = StyleSheet.create(({ colors, radius, space }) => ({ badge: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', borderRadius: radius.full, borderCurve: 'continuous', gap: space.xs, paddingVertical: space.xs, paddingHorizontal: space.md, variants: { variant: { primary: { backgroundColor: colors.primary, }, secondary: { backgroundColor: colors.secondary, }, destructive: { backgroundColor: colors.destructive, }, success: { backgroundColor: colors.success, }, outline: { borderWidth: 1, borderColor: colors.border, }, }, }, }, badgeIconOnly: { paddingHorizontal: space.xs, }, })); export { Badge, useBadge }; export type { BadgeProps };

Badge

Installation

Usage

On this page