Badge

Badge is a global component used for pimples, numeric notifications and icon badges. Badge indicates new threads in the child view and creates a “trail” user can follow. Use a Pimple Badge to indicate a notification or new activity of an item (e.g. new activity inside a group) or a status (online, unread).

Badges usually appear on or near other components like Icons, Avatars, Chips and Lists.

Overview

Types

Property	Preview
Counter
Text
Pimple
Icon

Size

Property	Counter	Pimple
Large
Small

Style

Property	Counter	Pimple
Red Used for notifications or new items.
Green Used for live visitors or an “online” indication.
Blue Used for chat messages.
Grey Used for passive counters.

Accessories

Property	Preview
Icon Icon can be added as an accessory to counter badge, or cover the entire badge

Spec

Badge size recommendations

On Icon: Large Pimple or Small Badge

On Thumbnail: Large Badge

On Avatar:
Avatar xxxSmall, xxSmall - Pimple Small
Avatar xSmall, Small, Medium - Pimple Large
Avatar Large, xLarge - Pimple Large
(the badge is positioned using pythagoras)

SizeBadge basic and minimum shape is a circle. Badge expands horizontally according to value width maintaining fixed padding.

Dev

PlaygroundCode Example

TIP

This component extends the basic/TouchableOpacity, basic/View props.

APIThis is the list of additional props for the component

backgroundColor

string

Background color

borderColor

ImageStyle['borderColor']

Color of border around the badge

borderRadius

number

Radius of border around the badge

borderWidth

number

Width of border around the badge

containerStyle

ViewStyle

Additional styles for the top container

customElement

JSX.Element

Custom element to render instead of an icon

hitSlop

ViewProps['hitSlop']

Defines how far a touch event can start away from the badge

icon

ImageSourcePropType

Renders an icon badge

iconProps

ImageProps

Additional props passed to icon

iconStyle

ImageStyle

Additional styling to badge icon

label

string

Text to show inside the badgePassing a label (undefined) will present a pimple badge

labelFormatterLimit

LabelFormatterValues

Receives a number from 1 to 4, representing the label's max digit lengthBeyond the max number for that digit length, a '+' will show at the end. If set to a value not included in LABEL_FORMATTER_VALUES, no formatting will occur. Example: labelLengthFormatter={2}, label={124}, label will present '99+'

labelStyle

TextStyle

Additional styles for the badge label

onPress

(props: any) => void

Called when the badge is pressed

size

number

Badge's size