Badge | NativeBase | Universal Components for React and React Native

Show Code
Playground
function Example() {
  return <Badge shadow={2}>NEW FEATURE</Badge>;
}
function Example() {
  return <Badge shadow={2}>NEW FEATURE</Badge>;
}

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

Playground
function Example() {
  return <Box alignItems="center">
      <Badge>NEW FEATURE</Badge>
    </Box>;
}
function Example() {
  return <Box alignItems="center">
      <Badge>NEW FEATURE</Badge>
    </Box>;
}

Playground
function Example() {
  return <HStack space={{
    base: 2,
    sm: 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,
    sm: 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>;
}

Playground
//@ts-nocheck
function Example() {
  return <Box alignItems="center">
      <HStack space={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>
    </Box>;
}
//@ts-nocheck
function Example() {
  return <Box alignItems="center">
      <HStack space={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>
    </Box>;
}

Playground
function Example() {
  return <Box alignItems="center">
      <VStack>
        <Badge // bg="red.400"
      colorScheme="danger" rounded="full" 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>
    </Box>;
}
function Example() {
  return <Box alignItems="center">
      <VStack>
        <Badge // bg="red.400"
      colorScheme="danger" rounded="full" 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>
    </Box>;
}