{ "name": "Badge", "category": "status", "description": "Round colored badge, typically used to show a number", "extends": [ "basic/TouchableOpacity", "basic/View" ], "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/BadgesScreen.tsx", "images": [ "https://user-images.githubusercontent.com/33805983/34480753-df7a868a-efb6-11e7-9072-80f5c110a4f3.png" ], "props": [ { "name": "size", "type": "number", "description": "Badge's size" }, { "name": "label", "type": "string", "description": "Text to show inside the badge", "note": "Passing a label (undefined) will present a pimple badge" }, { "name": "labelStyle", "type": "TextStyle", "description": "Additional styles for the badge label" }, { "name": "onPress", "type": "(props: any) => void", "description": "Called when the badge is pressed" }, { "name": "hitSlop", "type": "ViewProps['hitSlop']", "description": "Defines how far a touch event can start away from the badge" }, { "name": "backgroundColor", "type": "string", "description": "Background color" }, { "name": "borderWidth", "type": "number", "description": "Width of border around the badge" }, { "name": "borderRadius", "type": "number", "description": "Radius of border around the badge" }, { "name": "borderColor", "type": "ImageStyle['borderColor']", "description": "Color of border around the badge" }, { "name": "labelFormatterLimit", "type": "LabelFormatterValues", "description": "Receives a number from 1 to 4, representing the label's max digit length", "note": "Beyond the max number for that digit length, a '+' will show at the end. \nIf set to a value not included in LABEL_FORMATTER_VALUES, no formatting will occur. \nExample: labelLengthFormatter={2}, label={124}, label will present '99+'" }, { "name": "icon", "type": "ImageSourcePropType", "description": "Renders an icon badge" }, { "name": "iconStyle", "type": "ImageStyle", "description": "Additional styling to badge icon" }, { "name": "iconProps", "type": "ImageProps", "description": "Additional props passed to icon" }, { "name": "customElement", "type": "JSX.Element", "description": "Custom element to render instead of an icon" }, { "name": "containerStyle", "type": "ViewStyle", "description": "Additional styles for the top container" } ], "snippet": [ "" ], "docs": { "hero": { "title": "Badge", "description": "markdown:\nBadge 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. \nUse 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).\n\nBadges usually appear on or near other components like Icons, Avatars, Chips and Lists.", "type": "hero", "layout": "horizontal", "content": [ { "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Badge/badge_cover.png" } ] }, "tabs": [ { "title": "Overview", "sections": [ { "type": "table", "columns": [ "Property", "Preview" ], "items": [ { "title": "Counter", "content": [ { "props": [ { "label": "1", "backgroundColor": "#FC3D2F", "labelFormatterLimit": 2 }, { "label": "1002", "labelFormatterLimit": 3, "backgroundColor": "#FC3D2F" }, { "label": "102", "labelFormatterLimit": 2, "backgroundColor": "#FC3D2F", "icon": { "uri": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/icons/icon%20examples%20for%20docs/notificationsFillSmall.png" } } ] } ] }, { "title": "Text", "content": [ { "props": { "label": "New", "backgroundColor": "#FC3D2F" } } ] }, { "title": "Pimple", "content": [ { "props": { "label": "", "backgroundColor": "#FC3D2F" } } ] }, { "title": "Icon", "content": [ { "props": { "backgroundColor": "#FC3D2F", "icon": { "uri": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/icons/icon%20examples%20for%20docs/socialFacebook.png" } } } ] } ], "title": "Types" }, { "type": "table", "columns": [ "Property", "Counter", "Pimple" ], "items": [ { "title": "Large", "content": [ { "props": { "label": "2", "labelFormatterLimit": 2, "backgroundColor": "#FC3D2F" } }, { "props": { "label": "", "backgroundColor": "#FC3D2F", "size": "small" } } ] }, { "title": "Small", "content": [ { "props": { "label": "", "backgroundColor": "#FC3D2F", "labelFormatterLimit": 2, "size": "small" } }, { "props": { "label": "", "backgroundColor": "#FC3D2F" } } ] } ], "title": "Size" }, { "type": "table", "columns": [ "Property", "Counter", "Pimple" ], "items": [ { "title": "Red", "description": "Used for notifications or new items. ", "content": [ { "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Badge/badge_style_counter_red.png", "props": { "label": "2", "labelFormatterLimit": 2, "backgroundColor": "#FC3D2F" } }, { "props": { "label": "", "backgroundColor": "#FC3D2F" } } ] }, { "title": "Green", "description": "Used for live visitors or an “online” indication. ", "content": [ { "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Badge/badge_style_counter_green.png", "props": { "label": "2", "labelFormatterLimit": 2, "backgroundColor": "#00A87E" } }, { "props": { "label": "", "backgroundColor": "#00A87E" } } ] }, { "title": "Blue", "description": "Used for chat messages.", "content": [ { "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Badge/badge_style_counter_blue.png", "props": { "label": "2", "labelFormatterLimit": 2 } }, { "props": { "label": "" } } ] }, { "title": "Grey", "description": "Used for passive counters.", "content": [ { "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Badge/badge_style_counter_grey.png", "props": { "label": "2", "labelFormatterLimit": 2, "backgroundColor": "#A6ACB1" } }, { "props": { "label": "", "backgroundColor": "#A6ACB1" } } ] } ], "title": "Style" }, { "type": "table", "columns": [ "Property", "Preview" ], "items": [ { "title": "Icon", "description": "Icon can be added as an accessory to counter badge, or cover the entire badge", "content": [ { "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Badge/badge_accessory_icon.png", "props": [ { "label": "102", "labelFormatterLimit": 2, "backgroundColor": "#FC3D2F", "icon": { "uri": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/icons/icon%20examples%20for%20docs/notificationsFillSmall.png" } }, { "label": "", "icon": { "uri": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/icons/icon%20examples%20for%20docs/socialFacebook.png" } } ] } ] } ], "title": "Accessories" }, { "type": "list", "items": [ { "title": "Badge size recommendations", "description": "markdown:\nOn Icon: Large Pimple or Small Badge\n\nOn Thumbnail: Large Badge\n\nOn Avatar:
Avatar xxxSmall, xxSmall - Pimple Small
Avatar xSmall, Small, Medium - Pimple Large
Avatar Large, xLarge - Pimple Large
(the badge is positioned using pythagoras)", "content": [ { "value": "https://embed.figma.com/design/xFjvYNkGTmYTGYMLrmz9Ir/Docs-Assets?node-id=487-40121&embed-host=share" } ] }, { "title": "Size", "description": "Badge basic and minimum shape is a circle. Badge expands horizontally according to value width maintaining fixed padding. ", "content": [ { "value": "https://embed.figma.com/design/xFjvYNkGTmYTGYMLrmz9Ir/Docs-Assets?node-id=487-40267&embed-host=share" } ] } ], "title": "Spec", "layout": "horizontal" } ] } ] } }