Badge | NativeBase

NativeBase

3.4.x

⌘

Hire us

NativeBase

Introduction

Getting Started

Installation

Setup NativeBase Provider

Resources

Contribution

Core Concepts

Utility First

Utility Props Specificity

New

Design Tokens

Pseudo Props: Overview

New

Pseudo Props: Dos & Don'ts

Features

Color mode (Dark Mode)

Theme

Customizing Components

Making components dark mode compatible

Layout

Forms

Data Display

Feedback

Typography

Overlay

Disclosure

Media and Icons

Transition

Others

ReactNative Components

Hooks

Examples

Recipes

Designs

Forms

Layout

Migration

Upgrading to 3.2.0 from 3.x

Components Migration

If you are starting a new project, please try gluestack-ui for better performance and new design.

Badge

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

Import

Copy
import { Badge } from 'native-base';

Examples

Basic


Playground
function Example() {
  return <Badge>NEW FEATURE</Badge>;
}function Example() {
  return <Badge>NEW FEATURE</Badge>;
}

Color Scheme


Playground
function Example() {
  return <HStack space={{
    base: 2,
    md: 4
  }} mx={{
    base: "auto",
    md: 0
  }}>
      <Badge colorScheme="success">SUCCESS</Badge>
      <Badge colorScheme="danger">DANGER</Badge>
      <Badge colorScheme="info">INFO</Badge>
      <Badge colorScheme="coolGray">DARK</Badge>
    </HStack>;
}function Example() {
  return <HStack space={{
    base: 2,
    md: 4
  }} mx={{
    base: "auto",
    md: 0
  }}>
      <Badge colorScheme="success">SUCCESS</Badge>
      <Badge colorScheme="danger">DANGER</Badge>
      <Badge colorScheme="info">INFO</Badge>
      <Badge colorScheme="coolGray">DARK</Badge>
    </HStack>;
}

Variants


Playground
//@ts-nocheck
function Example() {
  return <>
      <HStack space={{
      base: "2",
      md: "4"
    }} mx={{
      base: "auto",
      md: "0"
    }}>
        {["solid", "outline", "subtle"].map(key => <VStack key={key} space={4}>
            <Badge variant={key} alignSelf="center">
              DEFAULT
            </Badge>
            <Badge colorScheme="success" alignSelf="center" variant={key}>
              SUCCESS
            </Badge>
            <Badge colorScheme="danger" alignSelf="center" variant={key}>
              DANGER
            </Badge>
            <Badge colorScheme="info" alignSelf="center" variant={key}>
              INFO
            </Badge>
          </VStack>)}
      </HStack>
    </>;
}//@ts-nocheck
function Example() {
  return <>
      <HStack space={{
      base: "2",
      md: "4"
    }} mx={{
      base: "auto",
      md: "0"
    }}>
        {["solid", "outline", "subtle"].map(key => <VStack key={key} space={4}>
            <Badge variant={key} alignSelf="center">
              DEFAULT
            </Badge>
            <Badge colorScheme="success" alignSelf="center" variant={key}>
              SUCCESS
            </Badge>
            <Badge colorScheme="danger" alignSelf="center" variant={key}>
              DANGER
            </Badge>
            <Badge colorScheme="info" alignSelf="center" variant={key}>
              INFO
            </Badge>
          </VStack>)}
      </HStack>
    </>;
}

Composition


Playground
function Example() {
  return <VStack>
      <Badge // bg="red.400"
    colorScheme="danger" rounded="999px" mb={-4} mr={-4} zIndex={1} variant="solid" alignSelf="flex-end" _text={{
      fontSize: 12
    }}>
        2
      </Badge>
      <Button mx={{
      base: "auto",
      md: 0
    }} p="2" bg="cyan.500" _text={{
      fontSize: 14
    }}>
        Notifications
      </Button>
    </VStack>;
}function Example() {
  return <VStack>
      <Badge // bg="red.400"
    colorScheme="danger" rounded="999px" mb={-4} mr={-4} zIndex={1} variant="solid" alignSelf="flex-end" _text={{
      fontSize: 12
    }}>
        2
      </Badge>
      <Button mx={{
      base: "auto",
      md: 0
    }} p="2" bg="cyan.500" _text={{
      fontSize: 14
    }}>
        Notifications
      </Button>
    </VStack>;
}