Badge

Component to highlight an item's status for quick recognition.

Import

import { Badge } from 'react-native-ficus-ui';

Usage

Change color scheme

EDITABLE EXAMPLE

<HStack spacing="md">
  <Badge>New</Badge>
  <Badge colorScheme="green">New</Badge>
  <Badge colorScheme="red">New</Badge>
  <Badge colorScheme="orange">New</Badge>
  <Badge colorScheme="purple">New</Badge>
  <Badge colorScheme="pink">New</Badge>
</HStack>

Change font size

EDITABLE EXAMPLE

<HStack spacing="md">
  <Badge fontSize="xs">New</Badge>
  <Badge colorScheme="green" fontSize="sm">
    New
  </Badge>
  <Badge colorScheme="red" fontSize="md">
    New
  </Badge>
  <Badge colorScheme="orange" fontSize="lg">
    New
  </Badge>
  <Badge colorScheme="purple" fontSize="xl">
    New
  </Badge>
  <Badge colorScheme="pink" fontSize="2xl">
    New
  </Badge>
</HStack>

Variants

EDITABLE EXAMPLE

<HStack spacing="md">
  <Badge variant="outline" colorScheme="green" fontSize="xl">
    Outline
  </Badge>
  <Badge variant="solid" colorScheme="green" fontSize="xl">
    Solid
  </Badge>
  <Badge variant="subtle" colorScheme="green" fontSize="xl">
    Subtle
  </Badge>
</HStack>

Props

Extends every Box and Text props.

`colorScheme`

The colorScheme property, will define background color and text color.

Type	Required	Default
string	Yes	gray

`variant`

The variant of the Badge.

Type	Required	Default
"solid"	"subtle"	"outline"

Text Avatar