Version: 3.1.0

Badge

Badges are used to highlight an item's status for quick recognition.

Import#

import { Badge } from 'native-base';

Examples#

Basic#

Color Scheme#

Variants#

Composition#

Props#

Name Type Description Default
variant "solid" | "outline" | "subtle" The style variant of the badge. subtle
colorScheme string The color scheme to use for the badge. Must be a key in theme.colors. -

Badge implements Box

Styling#

NativeBase ships with a default theme for each component. Checkout the default theme of badge
We can easily extend the badge component theme using extendTheme function as shown below.
import { extendTheme, NativeBaseProvider } from "native-base";
const theme = extendTheme({
components: {
Badge: {
baseStyle: {},
defaultProps: {},
variants: {},
sizes: {},
}
}
});
function MyApp() {
return (
<NativeBaseProvider theme={theme}>
{/* Rest of the app goes here */}
</NativeBaseProvider>
)
}
Read more about extending component theme here.