Badge | NativeBase | Universal Components for React and React Native

Search
K
Hire us
Data Display
Typography
Disclosure
Media and Icons
Others
If you are starting a new project, we recommend using gluestack-ui. For your existing projects, you can utilize @gluestack-ui/themed-native-base (beta).
Badge
Badges allow the highlighting 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<ITextProps> & VariantSizeColorScheme<"Text">
_icon
Props to be passed to the Icon used inside of Button.
Type: InterfaceIconProps & Partial<{}> & VariantSizeColorScheme<"Icon">
Styling
NativeBase ships with a default theme for each component. Check out the default theme of the badge.
Info: We can easily extend the badge component theme using extendTheme function as described in the documentation .
Nativebase logo
MadeWithNativeBase