Badge

Badges are small status descriptors for UI elements.

Pro component

Requires all-access to use the source code

import { Icon } from '@roninoss/icons';
import { Stack } from 'expo-router';
import { View } from 'react-native';

import { Badge } from '~/components/nativewindui/Badge';
import { useColorScheme } from '~/lib/useColorScheme';

export default function BadgeScreen() {
  const { colors } = useColorScheme();
  return (
    <>
      <Stack.Screen options={{ title: 'Badge' }} />
      <View className="flex-1 items-center justify-center py-4">
        <View className="flex-row gap-8">
          <View>
            <Icon name="bell-outline" color={colors.foreground} />
            <Badge />
          </View>
          <View>
            <Icon name="bell-outline" color={colors.foreground} />
            <Badge>6</Badge>
          </View>
          <View>
            <Icon name="bell-outline" color={colors.foreground} />
            <Badge variant="info" />
          </View>
          <View>
            <Icon name="bell-outline" color={colors.foreground} />
            <Badge variant="info" maxCount={9}>
              10
            </Badge>
          </View>
        </View>
      </View>
    </>
  );
}

Unlock All Pro Screens & Components

Elevate your app with powerful, native-feeling components and templates. Build faster with beautiful ready-to-use designs.

Get all-access

Usage

import { Badge } from '~/components/nativewindui/Badge';

<View className="items-center">
  <View>
    <Icon name="bell-outline" color={colors.foreground} />
    <Badge>6</Badge>
  </View>
</View>

Props

Badge

Inherits all the props from NativeWindUI's Text component except for the variant prop.

Prop	Type	Default	Description
variant	'info' \| 'destructive'	'destructive'	The visual style of the badge. Defaults to "destructive".
maxCount	number		The maximum count to display. If the count exceeds this value, it will display "{maxCount}+".
textVariant	TextProps["variant"]	"caption2"	The text style variant to use. Defaults to "caption2".
containerClassName	string		Additional class name(s) for the badge container.