Badge
Badges are small components typically used to communicate a numerical value or indicate the status of an item to the user.
Import
import { Badge } from "@rneui/themed";
Usage
withBadge Higher-Order Component
The withBadge HOC allows you to easily add badges to icons and other components.
Props
Name | Type | Default | Description |
---|---|---|---|
Component | React Component | Press handlers present then Pressable else View | Custom component to replace the badge outer component. |
badgeStyle | View Style | Additional styling for badge (background) view component. | |
containerStyle | View Style | Style for the container. | |
onLongPress | GestureResponderEventHandler | Called when a long-tap gesture is detected. | |
onPress | Function | Called when a single tap gesture is detected. | |
onPressIn | GestureResponderEventHandler | Called when a touch is engaged before onPress . | |
onPressOut | GestureResponderEventHandler | Called when a touch is released before onPress . | |
pressableProps | PressableProps except click handlers | None | |
status | primary | success | warning | error | primary | Determines color of the indicator. |
textProps | TextProps | Extra props for text component. | |
textStyle | Text Style | Extra styling for icon component. | |
value | ReactNode | Text value to be displayed by badge, defaults to empty. |