Badge | NativeBase | Universal Components for React and React Native

Data Display
Typography
Disclosure
Media and Icons
Others
Badge
Badges allows the highlight of an item’s status. This provides quick recognition.
Show Code
Playground
Import
Copy
import { Badge } from 'native-base';
Examples
Basic
Playground
Color Scheme
Playground
Variants
Playground
Composition
Playground
Props
variant
The style variant of the badge.
Type: ResponsiveValue<"subtle" | "solid" | "outline" | (string & {})>
Default: subtle
colorScheme
The color scheme to use for the badge. Must be a key in theme.colors.
Type: ColorSchemeType
rightIcon
The right icon element to use in the button.
Type: Element | Element[]
leftIcon
The left icon element to use in the button.
Type: Element | Element[]
startIcon
The start icon element to use in the button.
Type: Element | Element[]
endIcon
The end icon element to use in the button.
Type: Element | Element[]
_text
Props to style the child text
Type: InterfaceTextProps
_icon
Props to be passed to the Icon used inside of Button.
Type: InterfaceIconProps & Partial<{}>
Styling
NativeBase ships with a default theme for each component. Checkout the default theme of badge.
Info: We can easily extend the badge component theme using extendTheme function as described in the documentation .
Nativebase logo
MadeWithNativeBase