import * as React from 'react'; import { View } from 'react-native'; import { createStyleSheet, useStyles } from 'react-native-unistyles'; import { Icon, IconProps } from './Icon'; import { Text, TextProps } from './Text'; import { genericForwardRef } from '@/utils/genericForwardRef'; import type { PolymorphicProps } from '@/types/components'; import type { Color, ColorStep } from '@/styles/tokens'; type BadgeColor = Color; type BadgeSize = 'sm' | 'md' | 'lg'; type BadgeVariant = 'solid' | 'soft' | 'outline' | 'surface'; type BadgeContextValue = { color: BadgeColor; size: BadgeSize; variant: BadgeVariant; highContrast: boolean; disabled: boolean; iconOnly: boolean; }; const BadgeContext = React.createContext(null); const useBadge = () => { const ctx = React.useContext(BadgeContext); if (!ctx) { throw new Error('useBadge must be used within a '); } return ctx; }; type BadgeProps = PolymorphicProps & { color?: BadgeColor; size?: BadgeSize; variant?: BadgeVariant; highContrast?: boolean; disabled?: boolean; iconOnly?: boolean; }; const Badge = genericForwardRef(function Badge< T extends React.ElementType>, >( { as, color = 'primary', size = 'md', variant = 'solid', highContrast = false, disabled = false, iconOnly = false, style: styleProp, ...restProps }: BadgeProps, ref: React.ForwardedRef, ) { const { styles } = useStyles(stylesheet, { size, variant, }); const Comp = as || View; return ( ); }); const textFontSizeMap: Record< NonNullable, TextProps['fontSize'] > = { sm: 11, md: 12, lg: 14, }; type BadgeTextProps = TextProps; const BadgeText = genericForwardRef(function BadgeText< T extends React.ElementType>, >(props: BadgeTextProps, ref: React.ForwardedRef) { const { color, variant, highContrast, size, disabled } = useBadge(); const colorStep: ColorStep = variant === 'solid' ? 'Contrast' : highContrast ? '12' : '11'; return ( ); }); const iconSizeMap: Record< NonNullable, IconProps['size'] > = { sm: '2xs', md: 'xs', lg: 'sm', }; type BadgeIconProps = IconProps; const BadgeIcon = React.forwardRef< React.ElementRef, BadgeIconProps >(function BadgeIcon(props, ref) { const { color, size, variant, highContrast, disabled } = useBadge(); const colorStep: ColorStep = variant === 'solid' ? 'Contrast' : highContrast ? '12' : '11'; return ( ); }); const stylesheet = createStyleSheet(({ colors, radius, space }) => ({ badge: (color: Color, iconOnly: boolean) => ({ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', borderRadius: radius.full, borderCurve: 'continuous', variants: { size: { sm: { width: iconOnly ? 20 : 'auto', height: 20, gap: space[2], paddingHorizontal: iconOnly ? 0 : space[8], }, md: { width: iconOnly ? 24 : 'auto', height: 24, gap: space[4], paddingHorizontal: iconOnly ? 0 : space[10], }, lg: { width: iconOnly ? 28 : 'auto', height: 28, gap: space[4], paddingHorizontal: iconOnly ? 0 : space[12], }, }, variant: { solid: { backgroundColor: colors[`${color}9`], }, soft: { backgroundColor: colors[`${color}3`], }, outline: { borderWidth: 1, backgroundColor: colors.transparent, borderColor: colors[`${color}7`], }, surface: { borderWidth: 1, backgroundColor: colors[`${color}3`], borderColor: colors[`${color}7`], }, }, }, }), badgeDisabled: { backgroundColor: colors.neutral3, borderColor: colors.neutral6, variants: { variant: { solid: {}, soft: {}, outline: { borderWidth: 1, backgroundColor: colors.transparent, }, surface: { borderWidth: 1, }, }, }, }, })); export { Badge, BadgeText, BadgeIcon, useBadge }; export type { BadgeProps, BadgeTextProps, BadgeIconProps };

Badge

Preview

Installation

Usage

On this page